Number

The number type stores numeric values (integers and decimals). It renders as a plain number input by default, or as a slider with a compact value input and unit label when configured.

Definition

import type { NumberField } from '@aphexcms/cms-core';

{
  name: 'price',
  type: 'number',
  title: 'Price',
  validation: (Rule) => Rule.required().positive()
}

Properties

Property	Type	Required	Description
`name`	`string`	Yes	Field identifier.
`type`	`'number'`	Yes	Must be `'number'`.
`title`	`string`	Yes	Label shown in the admin UI.
`description`	`string`	No	Help text shown below the label. Also used as placeholder text if provided.
`min`	`number`	No	Minimum value. The slider's lower bound; also set as the input's `min`.
`max`	`number`	No	Maximum value. The slider's upper bound; also set as the input's `max`.
`step`	`number`	No	Increment for the input/slider. Defaults to `1` in slider mode.
`initialValue`	`number \| () => number \| Promise<number>`	No	Default value.
`options`	`object`	No	Display options. See Options.
`validation`	`(Rule) => Rule`	No	Validation rules.

min/max set the corresponding HTML input constraints (and the slider's range), but the canonical source of truth for invalid input is still your validation rules — add Rule.min()/max() if you need an enforced error.

Options

Option	Type	Default	Description
`layout`	`'input' \| 'slider'`	`'input'`	`'slider'` renders a drag slider alongside a compact number input. Uses `min`/`max` (default 0–100).
`unit`	`string`	—	Unit suffix shown next to the value, e.g. `'px'`, `'%'`, `'rem'`.

Examples

Integer field

{
  name: 'quantity',
  type: 'number',
  title: 'Quantity',
  validation: (Rule) => Rule.required().integer().positive()
}

Constrained range

{
  name: 'rating',
  type: 'number',
  title: 'Rating',
  validation: (Rule) => Rule.required().min(1).max(5).integer()
}

Decimal values

{
  name: 'price',
  type: 'number',
  title: 'Price',
  initialValue: 0,
  validation: (Rule) => Rule.required().positive()
}

Slider with a unit

Set options.layout: 'slider' to get a drag slider with a compact value input and a unit label. min/max/step define the range; typed input is clamped to it.

{
  name: 'containerPadding',
  type: 'number',
  title: 'Container padding',
  min: 0,
  max: 200,
  step: 4,
  initialValue: 0,
  options: { layout: 'slider', unit: 'px' }
}

Number fields are ideal for driving styles — read the value in your frontend and bind it to a CSS variable or inline style (e.g. padding, opacity). Numbers pass straight through; with visual editing the layout updates live as you drag the slider. (String fields used in CSS need stegaClean first — see that guide.)

Validation

Available rules: required(), min(value), max(value), positive(), negative(), integer(), greaterThan(num), lessThan(num), custom(fn), error(msg), warning(msg), info(msg)

On this page