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

Multiselect Input

Table of contents

Description:

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

Multiselect inputs allow several values.

Appears in:
└── _inputs
    └── *
        └── Multiselect Input
Type:
Object
Properties:
cascadeboolean#

This key defines whether CloudCannon should merge this input configuration with any matching, less specific configurations elsewhere in the configuration cascade.

The configuration cascade works by finding the most specific _inputs entry.

Usually, once an option is found in the cascade, there's no reason to keep looking.

When this key is true, the cascade continues looking and each entry found is merged.

This key allows you to define some options globally while using specific options for other keys at different levels of the cascade.

For example, define a comment globally, but use collection-specific label for inputs in different collections.

You can stop the cascade at any point in the configuration cascade by setting cascade to false.

Defaults to: true

Show examplesHide examples

In this example, we have configured cascade to merge input configurations across the configuration cascade.

Copied to clipboard
_inputs:
  title:
    type: text
    cascade: true
    comment: Global comment for all title inputs
{
  "_inputs": {
    "title": {
      "type": "text",
      "cascade": true,
      "comment": "Global comment for all title inputs"
    }
  }
}
commentstring#

This key defines the subtitle text above an Input.

CloudCannon supports a limited selection of Markdown formatting for the value of this key: links, bold, italic, subscript, superscript, and inline code.

This key has no default.

Show examplesHide examples

In this example, we want to add helpful guidance for our page_description Input.

Copied to clipboard
_inputs:
  page_description:
    type: text
    label: Page Description
    comment: Enter a brief description of this page for search engines
{
  "_inputs": {
    "page_description": {
      "type": "text",
      "label": "Page Description",
      "comment": "Enter a brief description of this page for search engines"
    }
  }
}
contextObject#

This key defines a context box for extra information about an Input.

This key has no default.

Show examplesHide examples

In this example, we want to add a context box to our date_created Input to explain its purpose.

Copied to clipboard
_inputs:
  date_created:
    type: datetime
    label: Date of article creation
    instance_value: NOW
    context:
      open: false
      title: Help
      icon: help
      content: This date field will automatically populate when you create an article.
{
  "_inputs": {
    "date_created": {
      "type": "datetime",
      "label": "Date of article creation",
      "instance_value": "NOW",
      "context": {
        "open": false,
        "title": "Help",
        "icon": "help",
        "content": "This date field will automatically populate when you create an article."
      }
    }
  }
}

This key toggles whether CloudCannon will rehydrate inputs configured with an instance_value with a new value when duplicated.

Setting this key to true will prevent rehydration of instance values when inputs are duplicated.

Defaults to: false

Show examplesHide examples

In this example, CloudCannon will prevent rehydration of instance values when inputs are duplicated.

Copied to clipboard
_inputs:
  id:
    type: text
    instance_value: UUID
    disable_instance_value_rehydration: true
{
  "_inputs": {
    "id": {
      "type": "text",
      "instance_value": "UUID",
      "disable_instance_value_rehydration": true
    }
  }
}

This key defines whether the value of an input is editable in the Data Editor or the sidebar of the Visual Editor or Content Editor.

Disabled inputs are useful if you want CloudCannon to display the input value, but prevent team members from editing the value outside of the Source Editor.

The value of this key can be a boolean or a string. A boolean value of true will prevent team members from editing the value.

A string value can prevent team members from editing an input based on the value of another input.

You can reverse the value with a ! character at the beginning.

  • published hides an input when the sibling input published is truthy
  • !published hides an input when the sibling input published is falsy

For reverse values in YAML files, the string should be in ' or " quotation marks.

By default, this key is false (i.e., team members can edit input values).

Defaults to: false

Show examplesHide examples

In this example, we have configured the date_created Date 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
    disabled: true
    instance_value: NOW
    options:
      timezone: Etc/UTC
{
  "_inputs": {
    "date_created": {
      "type": "datetime",
      "label": "Date of article creation",
      "comment": "UTC +0 timezone",
      "disabled": true,
      "instance_value": "NOW",
      "options": {
        "timezone": "Etc/UTC"
      }
    }
  }
}

This key defines the documentation link at the top of a Collection browser.

Collection documentation is useful for assisting your team members.

Show examplesHide examples

In this example, the documentation link for the data Collection goes to CloudCannon Documentation.

Copied to clipboard
collections_config:
  data:
    documentation:
      url: https://cloudcannon.com/documentation/
      text: CloudCannon Documentation
      icon: star
{
  "collections_config": {
    "data": {
      "documentation": {
        "url": "https://cloudcannon.com/documentation/",
        "text": "CloudCannon Documentation",
        "icon": "star"
      }
    }
  }
}

This key defines the visibility of an input in the Data Editor or the sidebar of the Visual Editor or Content Editor.

Hidden inputs are useful when you want an input to exist, but not be visible or editable outside of the Source Editor.

Value can be a boolean or a string. A boolean value of true will hide the input.

A string value can hide an input based on the value of another input.

You can reverse the value with a ! character at the beginning.

  • published hides an input when the sibling input published is truthy
  • !published hides an input when the sibling input published is falsy

For reverse values in YAML files, the string should be in ' or " quotation marks.

By default, this key follows the input naming convention where key names beginning with an underscore are hidden true.

Defaults to: false

This key defines whether an input is automatically populated with a value when the input is created.

This occurs when creating a new file, or adding array items containing this input.

Valid values are UUID or NOW.

  • UUID generates a uuidv4 key (extremely unlikely to generate duplicates), useful for identifying unique items (e.g. 6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b)
  • NOW generates the current datetime in the Site's configured timezone

Allowed values: UUID NOW

Show examplesHide examples

In this example, we have configured an input to automatically populate with a UUID when created.

Copied to clipboard
_inputs:
  id:
    type: text
    instance_value: UUID
{
  "_inputs": {
    "id": {
      "type": "text",
      "instance_value": "UUID"
    }
  }
}
labelstring#

This key defines the bold title text above an Input.

Show examplesHide examples

In this example, we want to customize the label for our page_title Input to be more descriptive.

Copied to clipboard
_inputs:
  page_title:
    type: text
    label: Article Title
    comment: Enter the main title for this article
{
  "_inputs": {
    "page_title": {
      "type": "text",
      "label": "Article Title",
      "comment": "Enter the main title for this article"
    }
  }
}
optionsObject#

This key defines options that are specific to Multiselect Inputs.

Show examplesHide examples

In this example, we have configured Multiselect Input options including values.

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

This key defines the input type, which controls how this input appears and behaves.

Show examplesHide examples

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

Copied to clipboard
_inputs:
  tags:
    type: multiselect
{
  "_inputs": {
    "tags": {
      "type": "multiselect"
    }
  }
}
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"
        ]
      }
    }
  }
}
Open in a new tab