What are inputs?

Last modified: August 20th, 2024

Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.

Great! We'll show you documentation relevant to .
You can change this any time using the dropdown in the navigation bar.

An input is an editing interface for structured data in your data files or the front matter of markup files. An input could be a text field for the description of your file, a date field for the day a blog was published, a select field with a list of predefined tags for your content, or more.

Inputs appear in the Data Editor, as well as in the sidebar and data panels of the Content and Visual Editors. You can configure inputs anywhere in the configuration cascade.

A close up of an email input in the Data Editor shows a label, comment, text field, and context dropdown.

All inputs have four main components: the label, comment, context, and type.

The label of an input adds a title in bold at the top of the input. If you don’t configure a label for your input, CloudCannon will use the key name.

You can add extra information to your inputs using comments and context, such as instructions for your team members on how to use an input. A comment is a subtitle underneath the input label, and the context is a gray dropdown underneath the input field. You can use a limited selection of Markdown formatting for comments and context: links, headings (context only), bold, italic, subscript, superscript, and inline code.

Input type determines the functionality and appearance of the editing interface. Different input types are suited to different data types. CloudCannon supports twelve types of input:

  • Boolean — Define a true or false value using a checkbox or a switch.
  • Code — Add a code editor.
  • Color — Add a color using a color picker with spectrum and transparency controls.
  • Date and Time — Define a date and/or time.
  • File — Upload a file, such as an image or a document, and store the file path.
  • Number — Add a number using a text box or a range slider.
  • Object — Group inputs under a single Object.
  • Array — Create a list of inputs, or input groups.
  • Select and Multiselect — Select one or more options from a predefined list.
  • Text — Write plain text content.
  • Rich Text — Write and format markup content in HTML or Markdown.
  • URL — Add a relative or absolute URL.

For more information, including a list of all keys available for configuring each input, please read our documentation on each input type.

Default behavior for unconfigured inputs#

Normally, CloudCannon uses the input type to determine which default options to apply. However, in some cases, CloudCannon can still detect unconfigured inputs based on the value and key name.

The value of an unconfigured input can help CloudCannon determine its type. For example, CloudCannon will interpret a key with a true or false value as a Boolean input and a string value as a Text input. CloudCannon can use this method to determine Boolean, Number, Object, Array, and Text inputs.

Most input types also have a naming convention that allows CloudCannon to determine the input type by the key name. For example, CloudCannon will interpret any key name ending in _color or _hex as a Color input and any key name ending in _path or _image as a File input. Each input type has multiple naming conventions. CloudCannon can use this method to determine Code, Color, Date and Time, File, Number, Select and Multiselect, Text, Rich Text, and URL inputs.

Using these methods, you can add inputs to your files without the need for configuration. This behavior is convenient if you have simple inputs or do not want to configure inputs. It is also beneficial for new websites on CloudCannon where you have yet to create any CloudCannon-specific configuration.

The default input behavior may not be suitable for you if:

  • Your value or key name is not specific enough for CloudCannon to determine your desired input type.
  • You want to customize the user experience for your input.

We recommend configuring your inputs to overcome these limitations and for greater control over their functionality and appearance.

Open in a new tab