☁️ Loving our new documentation website? Provide feedback in the CloudCannon Community! ✨

Developer ReferenceConfiguration File

_inputs.*

Table of contents

Description:

This key defines an input configuration at a given level of the configuration cascade.

The value is an object that can contain type, label, options, disabled, hidden, and other input-specific properties. Each input configuration defines how team members interact with data in the Data Editor.

For more information, please read our documentation on inputs.

Appears in:
└── _inputs
    └── *
Types:
Text InputObject#

This key defines a simple editing interface for plain text.

Show examplesHide examples

In this example, we have configured the title key as a Text Input.

Copied to clipboard
_inputs:
  title:
    type: text
    label: Blog Title
{
  "_inputs": {
    "title": {
      "type": "text",
      "label": "Blog Title"
    }
  }
}
Textarea InputObject#

This key defines an editing interface for plain text.

Show examplesHide examples

In this example, we have configured the description key as a Textarea Input.

Copied to clipboard
_inputs:
  description:
    type: textarea
    label: Description
{
  "_inputs": {
    "description": {
      "type": "textarea",
      "label": "Description"
    }
  }
}
Code InputObject#

This key defines an editing interface for code or mono-spaced plain text content.

Color InputObject#

This key defines an editing interface for color values.

Boolean InputObject#

This key defines an editing interface for true or false values.

Show examplesHide examples

In this example, we have configured the featured key as a Boolean Input.

Copied to clipboard
_inputs:
  featured:
    type: switch
    label: Featured
{
  "_inputs": {
    "featured": {
      "type": "switch",
      "label": "Featured"
    }
  }
}
Number InputObject#

This key defines an editing interface for numeric values.

Show examplesHide examples

In this example, we have configured the quantity key as a Number Input.

Copied to clipboard
_inputs:
  quantity:
    type: number
    label: Quantity
{
  "_inputs": {
    "quantity": {
      "type": "number",
      "label": "Quantity"
    }
  }
}
Range InputObject#

This key defines a slider interface for selecting a numeric value.

Rich Text InputObject#

This key defines an editing interface for HTML markup content.

Date/Datetime InputObject#

This key defines an editing interface for date and/or time values.

Time InputObject#

This key defines an editing interface for time values only.

File InputObject#

This key defines an editing interface for uploading files to your repository or DAM and browsing existing assets.

URL InputObject#

This key defines an editing interface for relative, absolute, and fully qualified URLs.

Select InputObject#

This key defines an editing interface for data with multiple predefined options.

Select inputs only allow one value.

Show examplesHide examples

In this example, we have configured the category key as a Select Input.

Copied to clipboard
_inputs:
  category:
    type: select
    label: Category
    options:
      values:
        - Blog
        - News
        - Events
{
  "_inputs": {
    "category": {
      "type": "select",
      "label": "Category",
      "options": {
        "values": [
          "Blog",
          "News",
          "Events"
        ]
      }
    }
  }
}
Multiselect InputObject#

This key defines an editing interface for data with multiple predefined options.

Multiselect inputs allow several values.

Show examplesHide examples

In this example, we have configured the tags key as a Multiselect Input.

Copied to clipboard
_inputs:
  tags:
    type: multiselect
    label: Tags
    options:
      values:
        - featured
        - news
        - events
{
  "_inputs": {
    "tags": {
      "type": "multiselect",
      "label": "Tags",
      "options": {
        "values": [
          "featured",
          "news",
          "events"
        ]
      }
    }
  }
}
Choice InputObject#

This key defines an editing interface for data with multiple predefined options.

Choice inputs only allow one value.

Show examplesHide examples

In this example, we have configured the status key as a Choice Input.

Copied to clipboard
_inputs:
  status:
    type: choice
    label: Status
    options:
      values:
        - draft
        - published
        - archived
{
  "_inputs": {
    "status": {
      "type": "choice",
      "label": "Status",
      "options": {
        "values": [
          "draft",
          "published",
          "archived"
        ]
      }
    }
  }
}
Multichoice InputObject#

This key defines an editing interface for data with multiple predefined options.

Multichoice inputs allow several values.

Show examplesHide examples

In this example, we have configured the categories key as a Multichoice Input.

Copied to clipboard
_inputs:
  categories:
    type: multichoice
    label: Categories
    options:
      values:
        - technology
        - design
        - business
{
  "_inputs": {
    "categories": {
      "type": "multichoice",
      "label": "Categories",
      "options": {
        "values": [
          "technology",
          "design",
          "business"
        ]
      }
    }
  }
}
Object InputObject#

This key defines a user interface for a group of inputs.

Array InputObject#

This key defines a user interface for lists of inputs or input groups.

Examples:

In this example, we have configured the title key as a Text Input in the blog Collection.

Copied to clipboard
collections_config:
  blog:
    _inputs:
      title:
        type: text
        label: Title
{
  "collections_config": {
    "blog": {
      "_inputs": {
        "title": {
          "type": "text",
          "label": "Title"
        }
      }
    }
  }
}
Open in a new tab