Configure a Number input

Last modified: June 17th, 2025

Permissions required

Members of all Default Permission Groups, or Custom Permission Groups with the site:file:write permission, can configure inputs in all locations in the configuration cascade. You can limit permission to specific locations in the configuration using file globs.

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.

A screenshot of two Number inputs in the Data Editor, showing integer and decimal values.

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

cloudcannon.config.yaml
copied
_inputs:
  step:
    type: number
  priority:
    type: range

All inputs are defined under the _inputs key, regardless of where they are in the configuration cascade.

This Number input is called step.

The value of the type key determines the input type. This is a number input.

This Range input is called priority.

The value of the type key determines the input type. This is a range input.

cloudcannon.config.json
copied
{
  "_inputs": {
    "step": {
      "type": "number"
    },
    "priority": {
      "type": "range"
    }
  }
}

All inputs are defined under the _inputs key, regardless of where they are in the configuration cascade.

This Number input is called step.

The value of the type key determines the input type. This is a number input.

This Range input is called priority.

The value of the type key determines the input type. This is a range input.

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.

data.yml
copied

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.

cloudcannon.config.yaml
copied
_inputs:
  available:
    type: range
    label: Product Quantity
    comment: Enter the number of items in stock
    options:
      min: 0
      max: 1000
      step: 1
      required: true
cloudcannon.config.json
copied
{
  "_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.*.options.max — Number#

This key defines the maximum numerical value CloudCannon will allow in an Input. When configured, CloudCannon will prevent you from entering a greater numerical value. If the Input already contains a greater numerical value, CloudCannon will require you to enter a valid value to save your changes, or discard your unsaved changes. This key is required for range inputs.

Value can be any integer. If options.min is also configured, this key cannot be a lesser number.

This key has no default.

This key is available for Number Inputs.

Show exampleHide example

In this example, we want to add a rating out of five for each article in our travel blog using the rating Input. This Input limits you to a maximum rating of five.

cloudcannon.config.yaml
copied
_inputs:
  rating:
    type: number
    comment: How highly did you rate this experience?
    options:
      max: 5
      min: 1
cloudcannon.config.json
copied
{
  "_inputs": {
    "rating": {
      "type": "number",
      "comment": "How highly did you rate this experience?",
      "options": {
        "max": 5,
        "min": 1
      }
    }
  }
}
_inputs.*.options.min — Number#

This key defines the minimum numerical value CloudCannon will allow in an Input. When configured, CloudCannon will prevent you from entering a lesser numerical value. If the Input already contains a lesser numerical value, CloudCannon will require you to enter a valid value to save your changes, or discard your unsaved changes. This key is required for range inputs

Value can be any integer. If options.max is also configured, this key cannot be a greater number.

This key has no default.

This key is available for Number Inputs.

Show exampleHide example

In this example, we want to add a rating out of five for each article in our travel blog using the rating Input. This Input limits you to a minimum rating of one.

cloudcannon.config.yaml
copied
_inputs:
  rating:
    type: number
    comment: How highly did you rate this experience?
    options:
      max: 5
      min: 1
cloudcannon.config.json
copied
{
  "_inputs": {
    "rating": {
      "type": "number",
      "comment": "How highly did you rate this experience?",
      "options": {
        "max": 5,
        "min": 1
      }
    }
  }
}
step — Float or "any"#

This key determines how granular changes to the value can be. This key is required for range inputs

Value must be either:

  • a number.
  • any, which allows any decimal value between max and min values.
empty_type — string#

This key determines how CloudCannon handles an empty value. This key does not apply to existing empty values.

Value must be one of the following:

  • string - an empty value for this input will be stored as "".
  • null - an empty value for this input will be stored as a null value (default). This does not apply to TOML files.
_inputs.*.options.required — Boolean#

This key toggles whether CloudCannon requires this Input to have a value. If set to true, CloudCannon will require you to enter a value to save your changes, or discard your unsaved changes.

By default, this key is false (i.e, CloudCannon does not require this Input to have a value).

This key is available for Array, Boolean, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Show exampleHide example

In this example, we want to require our team to enter an author value for markup files with this Input.

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

Valid values#

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

Empty/null value:

  • number:

Whole base-10 integers (unquoted):

  • number: 123456
  • number: -123456
  • number: 123456e78
  • number: 123456e+78
  • number: 123456e-78

Floating point numbers (unquoted):

  • number: 123.456
  • number: -123.456
  • number: 123.456e78
  • number: 123.456e+78
  • number: 123.456e-78

Binary integers (unquoted):

  • number: 0b11110001001000000

Hexadecimal integers (unquoted):

  • number: 0x1E240

Whole base-10 integers (unquoted):

  • number = 12346
  • number = +123456
  • number = -123456
  • number = 123_456

Floating point numbers (unquoted):

  • number = 123.456
  • number = +123.456
  • number = -123.456
  • number = 123.456e78
  • number = 123.456E78
  • number = 123.456e09
  • number = 123.456e+78
  • number = 123.456e-78
  • number = -123.456e78
  • number = 123_456.789_012

Hexadecimal numbers (unquoted):

  • number = 0x1E240

Octal numbers (unquoted):

  • number = 0o361100

Binary numbers (unquoted):

  • number = 0b11110001001000000

Null value:

  • "number": null

Base-10 integers (unquoted):

  • "number": 123456
  • "number": -123456
  • "number": 123456e78
  • "number": -123456e78

Floating-point numbers (unquoted):

  • "number": 123.456
  • "number": -123.456
  • "number": 123.456e78
  • "number": 123.456E78
  • "number": 123.456e+78
  • "number": -123.456e78

When you load a binary and hexadecimal number in the Data Editor, it will be converted to base-10 integers.

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.

data.yml
copied

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.

We recommend configuring your inputs for greater control over their functionality and appearance.

Previous
What is a Number input?
Learn about Number inputs for editing structured data, including how they work in CloudCannon.
Next
What is an Object input?
Learn about Object inputs for editing structured data, including how they work in CloudCannon.

Open in a new tab