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

Developer ReferenceConfiguration File

_inputs

Table of contents

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.

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 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