• Pricing
Skip to content

Inputs

On this page:

Loading...

Customize editing interfaces for different types of content.

For example, showing a date picker for a date input, a color picker when the content editor needs to select a color, or a rich text editor if the content editor needs to input HTML or Markdown.

CloudCannon guesses the best input based on the variable name (date: will give you a date picker), and in some situations, the value (boolean will show as a switch) You can set the input type by using a naming convention in the variable name.

Inputs are used in the Front Matter Editor, Data Editor, and CSV Editor.

Text Inputs

HTML Rich Text icon

HTML Rich Text

WYSIWYG editor for HTML content.

Markdown Rich Text icon

Markdown Rich Text

WYSIWYG editor for Markdown content.

Text icon

Text

Single line field for text. Displayed for short text values.

Textarea icon

Textarea

Multiline text field expanded for longer text.

General Inputs

Boolean icon

Boolean

Checkbox, which can be triggered on or off. Displayed for the values true and false.

Code Block icon

Code Block

Configurable editor for blocks of code or monospace content.

Syntax highlighting is enabled when the suffix includes a language.

Color icon

Color

Input with dropdown for selecting color.

Each variation specified by the matching pattern in its key defines the preferred format of the color. The `color` and `colour` variations default to hex.

Variations ending in a have an additional transparency control.

Email icon

Email

Email address field.

Number icon

Number

Input field for numbers.

URL icon

URL

Input field with a preview for absolute or fully qualified URLs. Previews for URLs without a protocol are requested prefixed with http://

Time Inputs

Date Time icon

Date Time

Combination date picker and 12-hour time input. If site.timezone is set, dates are output with the matching offset suffix. If unset, dates are output in UTC (without an offset suffix).

Date icon

Date

Date picker with options for the year, month, and day. Displayed for keys ending in _date and date values.

If site.timezone is set, dates are output with the matching offset suffix. If unset, dates are output in UTC (without an offset suffix).

Time icon

Time

12-hour time input. Outputs to string.

Social Inputs

Facebook icon

Facebook

Text field with an avatar for Facebook social handles and full URLs.

GitHub icon

GitHub

Text field with an avatar for GitHub social handles and full URLs.

Instagram icon

Instagram

Text field with an avatar for various social handles and full URLs.

Pinterest icon

Pinterest

Text field with a logo for Pinterest social handles and full URLs.

Twitter icon

Twitter

Text field with an avatar for Twitter social handles and full URLs.

Structured Inputs

Array icon

Array

A button that navigates to an ordered list of items. Items in the array can be added, reordered, and deleted.

Displayed for array values.

Hidden icon

Hidden

Hidden values are not present in the interface. Applies to keys that begin with an underscore.

Object icon

Object

A button that navigates to grouped data. Displayed for object values.

Uploaders Inputs

Document icon

Document

Document selectors with controls to use external links and upload new files.

Limits files shown to documents.

File icon

File

File selectors with controls to use external links and upload new files. Does not limit file type.

Image icon

Image

Image selectors with controls to use external links and upload new files. Limits files shown to images.

Complex Inputs

Multiselect icon

Multiselect

Set of options in a tagger-style dropdown menu. Allows multiple items to be selected.

Select icon

Select

Set of options in a dropdown menu.

On this page:

Loading...

Don’t miss the latest
CloudCannon news freshly delivered to your inbox
Illustration of woman holding an envilope