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

Developer ReferenceConfiguration File

hidden

Table of contents

Description:

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.

Appears in:
└── _inputs
    └── *
        ├── Text Input
        │   └── hidden
        ├── Textarea Input
        │   └── hidden
        ├── Code Input
        │   └── hidden
        ├── Color Input
        │   └── hidden
        ├── Boolean Input
        │   └── hidden
        ├── Number Input
        │   └── hidden
        ├── Range Input
        │   └── hidden
        ├── Rich Text Input
        │   └── hidden
        ├── Date/Datetime Input
        │   └── hidden
        ├── Time Input
        │   └── hidden
        ├── File Input
        │   └── hidden
        ├── URL Input
        │   └── hidden
        ├── Select Input
        │   └── hidden
        ├── Multiselect Input
        │   └── hidden
        ├── Choice Input
        │   └── hidden
        ├── Multichoice Input
        │   └── hidden
        ├── Object Input
        │   └── hidden
        └── Array Input
            └── hidden
Default value:
false
Types:
Boolean Hiddenboolean#

This key represents a boolean value for the hidden key that toggles whether CloudCannon hides an input from view.

When set to true, CloudCannon hides the input from the Data Editor and the sidebar of the Visual Editor or Content Editor. The input still exists in the file and can be edited in the Source Editor.

When set to false, CloudCannon displays the input normally.

By default, this key follows the input naming convention where key names beginning with an underscore are hidden (true). Otherwise, this key defaults to false (i.e., the input is visible).

Show examplesHide examples

In this example, we have configured an input to be hidden using a boolean value, making it only editable in the Source Editor.

Copied to clipboard
_inputs:
  internal_id:
    type: text
    label: Internal ID
    hidden: true
{
  "_inputs": {
    "internal_id": {
      "type": "text",
      "label": "Internal ID",
      "hidden": true
    }
  }
}
Query String Hiddenstring#

This key represents a query string value for the hidden key that conditionally hides an input based on another input's value.

The value is a string that references a sibling input key name. CloudCannon evaluates the referenced input's value to determine whether to hide this input.

When the referenced input is truthy, CloudCannon hides this input. You can reverse this behavior by prefixing the string with !.

For reverse values in YAML files, the string should be wrapped in single or double quotation marks.

Show examplesHide examples

In this example, we have configured an input to be hidden when the published input is truthy.

Copied to clipboard
_inputs:
  published:
    type: checkbox
    label: Published
  draft_notes:
    type: textarea
    label: Draft notes
    hidden: published
{
  "_inputs": {
    "published": {
      "type": "checkbox",
      "label": "Published"
    },
    "draft_notes": {
      "type": "textarea",
      "label": "Draft notes",
      "hidden": "published"
    }
  }
}

In this example, we have configured an input to be hidden when the published input is falsy using the ! prefix.

Copied to clipboard
_inputs:
  published:
    type: checkbox
    label: Published
  publish_date:
    type: datetime
    label: Publish date
    hidden: '!published'
{
  "_inputs": {
    "published": {
      "type": "checkbox",
      "label": "Published"
    },
    "publish_date": {
      "type": "datetime",
      "label": "Publish date",
      "hidden": "!published"
    }
  }
}
Examples:
Open in a new tab