Number and date3 checks
FormNumber
Numbers with min, max and whole-number checks. Empty is null.
Example
Installation
bunx --bun shadcn@latest add @fieldkit/form-numberNeeds the @fieldkit registry. Add it once
Usage
- 1
Add the field to your schema
schema.tsimport { z } from "zod"import { numberField } from "@/lib/field-schemas" export const schema = z.object({ age: numberField({ min: 13, max: 120, integer: true }),}) - 2
Render it inside a Form
The name prop matches the schema key.
example-form.tsximport { Form } from "@/components/form/form"import { FormNumber } from "@/components/form/form-number"import { FormSubmit } from "@/components/form/form-submit"import { FieldGroup } from "@/components/ui/field"import { schema } from "./schema" export function ExampleForm() { return ( <Form schema={schema} defaultValues={{ age: null }} onSubmit={save} > <FieldGroup> <FormNumber name="age" /> <FormSubmit>Save</FormSubmit> </FieldGroup> </Form> )}
Checks
CheckOptionError message
Required
defaultEnter a numberRange
min, maxEnter a number of at least 13Whole numbers
integerEnter a whole numberBest practices
- Never use it for phone, card or ID numbers
- Ignores the scroll wheel so values do not change by accident
Try these values
Terminal
numberField({ min: 13, max: 120, integer: true })| Input | Result | Output |
|---|---|---|
30 | Valid | 30 |
12 | Invalid | Enter a number of at least 13 |
121 | Invalid | Enter a number of at most 120 |
30.5 | Invalid | Enter a whole number |
null | Invalid | Enter a number |
API reference
FormNumber
PropDescription
...input propsReact.ComponentProps<"input">min, max and step default to the schema rules.Field frame
PropDescription
namestringKey in the schema. Also picks the preset label and autocomplete.labelReact.ReactNodeOverrides the preset label. Pass null to hide it.descriptionReact.ReactNodeHint under the control.requiredbooleanOverrides the asterisk read from the schema.fieldPropsFormFieldPropsProps for the wrapping Field, such as className.