Configure a Number input

A Number input is an editing interface for numeric values. By configuring your inputs, you can customize the appearance and functionality for a better editing experience.

These instructions assume that you know where in the configuration cascade you want to configure your input. For more information, please read our documentation on Number inputs, inputs in general, and the configuration cascade.

To configure a Number input:

1. Open your website files in your local development environment, or log in to CloudCannon and select the Site for which you want to configure your input.
2. Navigate to the location in the configuration cascade where you want to configure your input. This can be the root of your CloudCannon Configuration File, within the collections_config.* key in your CloudCannon Configuration File, a Schema file, the frontmatter of a markup file, or any where you configure a Structure.
3. Identify the _inputs key, or create one at that level of the configuration cascade.
4. Add an input name key for your input under the _inputs key (a.k.a., _inputs.*). We recommend naming your input something simple that indicates the function or context.
5. Add the type key under your input name key, with the value number or range.
6. (Optional.) Add any other general configuration keys (e.g., label, comment, context) under your input name key.
7. If your input is a range, you must define the max, min, and step keys under _inputs.*.options.
8. (Optional.) Add any other specific configuration keys under _inputs.*.options (e.g., required).

CloudCannon will now apply this input configuration to all markup files that use your input name key, without needing to save your configuration. This allows you to make changes to your input configuration and see those changes affect inputs live.

When you are happy with your input configuration, you must save your input configuration.

_inputs:
  step:
    type: number
  priority:
    type: range

{
  "_inputs": {
    "step": {
      "type": "number"
    },
    "priority": {
      "type": "range"
    }
  }
}

When you add your input key name to a data or markup file, your configured Number input will appear in the Data Editor, Visual Editor, or Content Editor.

step: 4
priority: 10

Input configuration options#

General configuration options are available for all input types. You can define the label, comment, and context box for your Number input, whether it is hidden or disabled, and how CloudCannon should handle configuration at multiple levels of the configuration cascade.

Specific configuration options for Number inputs include defining the step size and how CloudCannon handles empty values. You can also add input validation to require a value and specify the minimum and maximum value.

Here is an example of a Number input using some of the most commonly used configuration keys.

_inputs:
  available:
    type: range
    label: Product Quantity
    comment: Enter the number of items in stock
    options:
      min: 0
      max: 1000
      step: 1
      required: true

{
  "_inputs": {
    "available": {
      "type": "range",
      "label": "Product Quantity",
      "comment": "Enter the number of items in stock",
      "options": {
        "min": 0,
        "max": 1000,
        "step": 1,
        "required": true
      }
    }
  }
}

For a complete list of configuration keys available for inputs please read our Inputs reference documentation.

These keys configure the appearance and functionality of Number inputs in CloudCannon.

_inputs:
  quantity:
    type: number
    options:
      empty_type: number

{
  "_inputs": {
    "quantity": {
      "type": "number",
      "options": {
        "empty_type": "number"
      }
    }
  }
}

_inputs:
  rating:
    type: number
    comment: How highly did you rate this experience?
    options:
      max: 5
      min: 1

{
  "_inputs": {
    "rating": {
      "type": "number",
      "comment": "How highly did you rate this experience?",
      "options": {
        "max": 5,
        "min": 1
      }
    }
  }
}

_inputs:
  rating:
    type: number
    comment: How highly did you rate this experience?
    options:
      max: 5
      max_message: Cannot be more than 5
      min: 1
      min_message: Cannot be less than 1

{
  "_inputs": {
    "rating": {
      "type": "number",
      "comment": "How highly did you rate this experience?",
      "options": {
        "max": 5,
        "max_message": "Cannot be more than 5",
        "min": 1,
        "min_message": "Cannot be less than 1"
      }
    }
  }
}

_inputs:
  rating:
    type: number
    comment: How highly did you rate this experience?
    options:
      max: 5
      min: 1

{
  "_inputs": {
    "rating": {
      "type": "number",
      "comment": "How highly did you rate this experience?",
      "options": {
        "max": 5,
        "min": 1
      }
    }
  }
}

_inputs:
  rating:
    type: number
    comment: How highly did you rate this experience?
    options:
      max: 5
      max_message: Cannot be more than 5
      min: 1
      min_message: Cannot be less than 1

{
  "_inputs": {
    "rating": {
      "type": "number",
      "comment": "How highly did you rate this experience?",
      "options": {
        "max": 5,
        "max_message": "Cannot be more than 5",
        "min": 1,
        "min_message": "Cannot be less than 1"
      }
    }
  }
}

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true

{
  "_inputs": {
    "author": {
      "type": "text",
      "comment": "Enter the name of the author for this blog post.",
      "options": {
        "required": true
      }
    }
  }
}

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true
      required_message: You are not allowed to leave this blank.

{
  "_inputs": {
    "author": {
      "type": "text",
      "comment": "Enter the name of the author for this blog post.",
      "options": {
        "required": true,
        "required_message": "You are not allowed to leave this blank."
      }
    }
  }
}

_inputs:
  rating:
    type: range
    options:
      min: 0
      max: 100
      step: 5

{
  "_inputs": {
    "rating": {
      "type": "range",
      "options": {
        "min": 0,
        "max": 100,
        "step": 5
      }
    }
  }
}

Valid values#

Here are some examples of valid values for the key number. These work for both Number and Range inputs.

Unconfigured Number inputs#

In some cases, CloudCannon can still detect a Number input even if you have not configured it.

CloudCannon will interpret any unconfigured input with a numeric value as a Number input. CloudCannon cannot create a Range input without configuration.

page_number: 7
days: 50

This behavior is convenient if you have simple inputs or do not want to configure inputs. It is also beneficial for new websites on CloudCannon where you have yet to create any CloudCannon-specific configuration.