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:
- 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.
- 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. - Identify the
_inputskey, or create one at that level of the configuration cascade. - Add an input name key for your input under the
_inputskey (a.k.a.,_inputs.*). We recommend naming your input something simple that indicates the function or context. - Add the
typekey under your input name key, with the valuenumberorrange. - (Optional.) Add any other general configuration keys (e.g.,
label,comment,context) under your input name key. - If your input is a
range, you must define themax,min, andstepkeys under_inputs.*.options. - (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
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.
{
"_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.
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.
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, 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.
_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
}
}
}
}This key defines a custom error message that explains why a value has failed the validation criteria from options.required. This key requires you to define options.required.
This key has no default.
This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.
Show exampleHide example
In this example, we prompt our team to use enter an Input value using a required message.
_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."
}
}
}
}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.
_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
}
}
}
}This key defines a custom error message that explains why a value has failed the validation criteria from options.max. This key requires you to define options.max.
This key has no default.
This key is available for Number Inputs.
Show exampleHide example
In this example, we prompt our team to enter a valid number using a custom message.
_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"
}
}
}
}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.
_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
}
}
}
}This key defines a custom error message that explains why a value has failed the validation criteria from options.min. This key requires you to define options.min.
This key has no default.
This key is available for Number Inputs.
Show exampleHide example
In this example, we prompt our team to enter a valid number using a custom message.
_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"
}
}
}
}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 betweenmaxandminvalues.
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.
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: 123456number: -123456number: 123456e78number: 123456e+78number: 123456e-78
Floating point numbers (unquoted):
number: 123.456number: -123.456number: 123.456e78number: 123.456e+78number: 123.456e-78
Binary integers (unquoted):
number: 0b11110001001000000
Hexadecimal integers (unquoted):
number: 0x1E240
Whole base-10 integers (unquoted):
number = 12346number = +123456number = -123456number = 123_456
Floating point numbers (unquoted):
number = 123.456number = +123.456number = -123.456number = 123.456e78number = 123.456E78number = 123.456e09number = 123.456e+78number = 123.456e-78number = -123.456e78number = 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.
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.