Number Field

The Number field stores numeric values and supports numeric range validation. For amounts of money, use a Money field. For percentages, star ratings and durations, use a Percent, Rating or Duration field. For a unique record number that FrogBot assigns, such as ticket 42, use an Autonumber field.

import type { Field } from 'frogbot'

export const Price: Field = {
  name: 'price',
  type: 'number',
  min: 0,
  required: true,
  admin: { step: 0.01 },
}

Config options

Option	Type	Default	Description
`name`	`string`	Required	Property name used in stored records and APIs. See field names.
`type`	`'number'`	Required	Selects the Number field.
`min`	`number`	—	Minimum accepted value, checked by the built-in validator.
`max`	`number`	—	Maximum accepted value, checked by the built-in validator.
`hasMany`	`boolean`	`false`	Stores an ordered array of numbers instead of one number.
`minRows`	`number`	—	Minimum number of numbers when a value is present. Only with `hasMany: true`.
`maxRows`	`number`	—	Maximum number of numbers when a value is present. Only with `hasMany: true`.
`label`	`string \| Record<string, string> \| (({ i18n, t }) => string) \| false`	Generated from `name`	Label shown in the admin panel. Use an object keyed by language code for translations, or `false` to hide the label.
`required`	`boolean`	`false`	Rejects an empty value in the default validation.
`unique`	`boolean`	`false`	Creates a unique database index for the field path. See indexes. SQL adapters reject `unique` together with `hasMany: true`.
`index`	`boolean`	`false`	Creates a database index for faster queries. `unique` already creates one.
`localized`	`boolean`	`false`	Stores one value per configured locale. Ignored without localization or inside a localized parent.
`defaultValue`	`number \| number[]` or `({ locale, req, user }) => value`	—	Value used when the field has no value. See default values.
`validate`	`Validate`	Built-in validator	Replaces the built-in validator. See validation.
`hooks`	`{ beforeValidate, beforeChange, afterChange, afterRead, beforeDuplicate }`	—	Arrays of `FieldHook` functions for each phase. See field hooks.
`access`	`{ create, read, update }`	Allowed	`FieldAccess` functions for each operation. See field access control.
`hidden`	`boolean`	`false`	Removes the field from API responses and the admin panel while keeping stored data.
`saveToJWT`	`boolean \| string`	`false`	In an auth-enabled collection, copies the value into the user’s token. A string sets the token key. See token data.
`virtual`	`boolean \| string`	`false`	`true` skips database storage; a string reads a value through a relationship path. Virtual fields are read-only in the admin panel unless `admin.readOnly` is `false`. See virtual fields.
`disableDuplicate`	`boolean`	`false`	Leaves the value out when a document is duplicated, so the copy uses `defaultValue`.
`admin`	`object`	—	Admin-panel options. See Admin options.
`custom`	`Record<string, any>`	—	Server-only metadata for your own code and plugins. Use `admin.custom` for data the browser also needs.
`jsonSchema`	`Array<({ jsonSchema }) => JSONSchema4>`	—	Functions that modify the JSON Schema used by type generation.

Admin options

Number fields support the standard field admin options, plus these options:

Option	Type	Default	Description
`step`	`number`	`1`	Amount the browser controls add or subtract.
`placeholder`	`string \| Record<string, string>`	—	Placeholder text. Use an object keyed by language code for translations.
`autoComplete`	`string`	—	Value of the input’s `autocomplete` attribute.

Example

import type { CollectionConfig } from 'frogbot'

export const Products: CollectionConfig = {
  slug: 'products',
  fields: [
    {
      name: 'price',
      type: 'number',
      min: 0,
      required: true,
      admin: {
        placeholder: '0.00',
        step: 0.01,
      },
    },
  ],
}

Custom components

Field

Server component

import { NumberField } from '@frogbotai/ui/admin'
import type { NumberFieldServerProps } from 'frogbot'

export const CustomNumberServer = (props: NumberFieldServerProps) => (
  <NumberField
    field={props.clientField}
    path={props.path}
    permissions={props.permissions}
    schemaPath={props.schemaPath}
  />
)

Client component

'use client'

import { NumberField } from '@frogbotai/ui/admin'
import type { NumberFieldClientProps } from 'frogbot'

export const CustomNumberClient = (props: NumberFieldClientProps) => <NumberField {...props} />

Label

Server component

import { FieldLabel } from '@frogbotai/ui/admin'
import type { NumberFieldLabelServerProps } from 'frogbot'

export const CustomNumberLabelServer = ({ clientField, path }: NumberFieldLabelServerProps) => (
  <FieldLabel
    label={clientField.label || clientField.name}
    path={path}
    required={clientField.required}
  />
)

Client component

'use client'

import { FieldLabel } from '@frogbotai/ui/admin'
import type { NumberFieldLabelClientProps } from 'frogbot'

export const CustomNumberLabelClient = ({ field, path }: NumberFieldLabelClientProps) => (
  <FieldLabel label={field.label || field.name} path={path} required={field.required} />
)

Start here

Basics

Managing Data

Features

Ecosystem

Deployment

Config options

Admin options

Example

Custom components

Field

Server component

Client component

Label

Server component

Client component

​Config options

​Admin options

​Example

​Custom components

​Field

​Server component

​Client component

​Label

​Server component

​Client component

Config options

Admin options

Example

Custom components

Field

Server component

Client component

Label

Server component

Client component