Developer ReferenceConfiguration File

_inputs

On this page

Description:

This key defines which inputs are available at a given level of the configuration cascade.

This key has no default.

If undefined at higher levels of the configuration cascade, _inputs will default to any values configured in the CloudCannon configuration file.

Appears in:
├── create
│   └── _inputs
├── [*]
│   └── _inputs
├── collections_config
│   └── *
│       ├── schemas
│       │   └── *
│       │       └── _inputs
│       └── _inputs
├── file_config
│   └── [*]
│       └── _inputs
├── pull_request_templates
│   └── [*]
│       └── _inputs
├── commit_templates
│   └── [*]
│       └── _inputs
└── Snippet
    └── _inputs
Type:
Object<_inputs.*>
Values:
Text InputObject#

This key defines a simple editing interface for plain text.

Appears in: _inputs.*, link_options, image_options.

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.

Appears in: _inputs.*.

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.

Appears in: _inputs.*.

Color InputObject#

This key defines an editing interface for color values.

Appears in: _inputs.*.

Boolean InputObject#

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

Appears in: _inputs.*, link_options, image_options.

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.

Appears in: _inputs.*.

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.

Appears in: _inputs.*.

Rich Text InputObject#

This key defines an editing interface for HTML markup content.

Appears in: _inputs.*.

Date/Datetime InputObject#

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

Appears in: _inputs.*.

Time InputObject#

This key defines an editing interface for time values only.

Appears in: _inputs.*.

File InputObject#

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

Appears in: _inputs.*.

URL InputObject#

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

Appears in: link_options, image_options, _inputs.*.

Select InputObject#

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

Select inputs only allow one value.

Appears in: code_block_options, _inputs.*.

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.

Appears in: _inputs.*.

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.

Appears in: _inputs.*.

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.

Appears in: _inputs.*.

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.

Appears in: _inputs.*.

Array InputObject#

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

Appears in: _inputs.*.

Examples:

In this example, we have configured the date_created key as a Date and Time Input, which will automatically populate when you create a file using this input. Editors cannot alter this input as the interface is disabled.

Copied to clipboard
_inputs:
  date_created:
    type: datetime
    label: Date of article creation
    comment: UTC +0 timezone
    context:
      open: false
      title: Help
      icon: help
      content: This date field will automatically populate when you create an article.
    hidden: false
    disabled: true
    instance_value: NOW
    cascade: true
    options:
      timezone: Etc/UTC
{
  "_inputs": {
    "date_created": {
      "type": "datetime",
      "label": "Date of article creation",
      "comment": "UTC +0 timezone",
      "context": {
        "open": false,
        "title": "Help",
        "icon": "help",
        "content": "This date field will automatically populate when you create an article."
      },
      "hidden": false,
      "disabled": true,
      "instance_value": "NOW",
      "cascade": true,
      "options": {
        "timezone": "Etc/UTC"
      }
    }
  }
}

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

Copied to clipboard
collections_config:
  blog:
    _inputs:
      blog_tags:
        type: multiselect
        label: Blog type
        comment: Select a blog type
        context:
          open: false
          title: Help
          icon: help
          content: |
            Blog tags help our users filter articles by topic.
        options:
          values:
            - Opinion
            - Feature
            - Resource
{
  "collections_config": {
    "blog": {
      "_inputs": {
        "blog_tags": {
          "type": "multiselect",
          "label": "Blog type",
          "comment": "Select a blog type",
          "context": {
            "open": false,
            "title": "Help",
            "icon": "help",
            "content": "Blog tags help our users filter articles by topic.\n"
          },
          "options": {
            "values": [
              "Opinion",
              "Feature",
              "Resource"
            ]
          }
        }
      }
    }
  }
}
Open in a new tab