Number Field

The Number field type allows users to input numeric values using a specialized input field that supports incrementing and decrementing values.

User Interface

Editor

Text input field that only accepts numeric values. It includes up and down arrows for incrementing or decrementing the value, as well as support for decimal points and negative numbers.

Additional text can be displayed before or after the input field using the before_input and after_input options.

Preview

A localized string representation of the number, formatted according to the preview locale.

Data Type

A number if the value_type option is set to int (default) or float. If the required option is set to false and the field is left empty, the value will be null.

If value_type is other than int or float, the value will be stored as a string.

Data Validation

• If the required option is set to true, the number value must not be null (i.e., the field must not be left empty).
• The number value must be within the range defined by the min and max options, if specified.
• The number value must conform to the type defined by the value_type option.

Options

In addition to the common field options, the Number field supports the following options:

Required Options

widget

• Type: string
• Default: string

Must be set to number.

Optional Options

Breaking change from Netlify/Decap CMS

Sveltia CMS does not support the deprecated camelCase valueType option. Use value_type instead.

default

• Type: number
• Default: null

The default value for the field.

value_type

• Type: string
• Default: int

The type of value to store. Can be one of the following:

• int: The UI only accepts integer input, and the value is stored as an integer.
• float: The UI accepts decimal input, and the value is stored as a floating-point number.
• int/string: The UI only accepts integer input, but the value is stored as a string.
• float/string: The UI accepts decimal input, but the value is stored as a string.

Note for Netlify/Decap CMS users

The Netlify/Decap CMS document says the value_type option accepts any type other than int and float , which results in the value being stored as a string. However, it actually doesn’t work in Decap CMS. So, Sveltia CMS only supports int and float, along with the new int/string and float/string types. Other types will default to int.

min

• Type: number
• Default: -Infinity

The minimum allowed value for the field. This enables validation to ensure that users enter a value greater than or equal to this minimum.

max

• Type: number
• Default: Infinity

The maximum allowed value for the field. This enables validation to ensure that users enter a value less than or equal to this maximum.

step

• Type: number
• Default: 1

The increment/decrement step for the input field. This determines the amount by which the value changes when using the up and down arrows.

before_input

• Type: string
• Default: ""

Additional text to display before the input field.

after_input

• Type: string
• Default: ""

Additional text to display after the input field.

Examples

Basic Number Field

This example demonstrates a simple Number field configuration that allows users to input integer values.

YAML

- name: quantity
  label: Quantity
  widget: number

TOML

[[fields]]
name = "quantity"
label = "Quantity"
widget = "number"

JSON

{
  "name": "quantity",
  "label": "Quantity",
  "widget": "number"
}

JavaScript

{
  name: 'quantity',
  label: 'Quantity',
  widget: 'number',
}

Output example:

YAML

quantity: 5

TOML

quantity = 5

JSON

{
  "quantity": 5
}

Price Field

This example demonstrates a Number field configured to store floating-point values, suitable for representing prices. It includes a dollar sign before the input field and sets a default value.

YAML

- name: price
  label: Price
  widget: number
  value_type: float
  before_input: $
  default: 9.99

TOML

[[fields]]
name = "price"
label = "Price"
widget = "number"
value_type = "float"
before_input = "$"
default = 9.99

JSON

{
  "name": "price",
  "label": "Price",
  "widget": "number",
  "value_type": "float",
  "before_input": "$",
  "default": 9.99
}

JavaScript

{
  name: 'price',
  label: 'Price',
  widget: 'number',
  value_type: 'float',
  before_input: '$',
  default: 9.99,
}

Output example:

YAML

price: 19.99

TOML

price = 19.99

JSON

{
  "price": 19.99
}