Show navigationHide navigation

Number

Numeric input for integers or floating-point values. Use for prices, quantities, sort order, ratings, and any numeric data.

Usage#

typescriptprice: { label: 'Price', format: 'number' },

Options#

Option	Type	Default	Description
`required`	`boolean`	`false`	Must have a numeric value
`valueType`	`'int' \| 'float'`	—	Restrict to whole numbers (`int`) or allow decimals (`float`)
`min`	`number`	—	Minimum allowed value
`max`	`number`	—	Maximum allowed value
`step`	`number \| 'any'`	—	Step increment (`'any'` for unrestricted decimals)
`hint`	`string`	—	Helper text below the field

When optional and left empty, the value is null.

Example: E-commerce product pricing#

Schema — a product with price, stock quantity, and display sort order:

typescript// cms/octocms.config.ts
product: {
  label: 'Product',
  hasMany: true,
  fields: {
    name: { label: 'Name', format: 'string', entryTitle: true, required: true },
    price: {
      label: 'Price ($)',
      format: 'number',
      required: true,
      valueType: 'float',
      min: 0,
      step: 0.01,
      hint: 'Price in USD',
    },
    stock: {
      label: 'Stock',
      format: 'number',
      valueType: 'int',
      min: 0,
    },
    sortOrder: {
      label: 'Sort Order',
      format: 'number',
      valueType: 'int',
      hint: 'Lower numbers appear first',
    },
  },
},

Query + render:

tsx// src/app/products/page.tsx
import { query } from 'cms/__generated__/query';

export default async function ProductsPage() {
  const products = await query('product')
    .filter((p) => p.fields.stock != null && p.fields.stock > 0)
    .sort('sortOrder', 'asc')
    .toArray();

  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map((p) => (
        <div key={p.sys.id}>
          <h3>{p.fields.name}</h3>
          <p>${p.fields.price.toFixed(2)}</p>
          <p>{p.fields.stock} in stock</p>
        </div>
      ))}
    </div>
  );
}

Storage#

JSON number in the entry file. Optional empty fields store null.

json{ "price": 29.99, "stock": 142, "sortOrder": 10 }

Query result#

Returned as a JavaScript number, or null if optional and empty.

Select

Datetime