Nullable Number
A number field with a checkbox that sets the value to null, for answers like "unlimited", "never" or "no limit".
Preview
A Number Field plus one checkbox, for when the honest answer is "no limit".
Usage
import { z } from 'zod'
import { AutoForm } from '@vitnode/core/components/form/auto-form'
import { AutoFormNullableNumber } from '@vitnode/core/components/form/fields/nullable-number'const formSchema = z.object({
max_members: z.number().int().min(1).nullable().default(10),
})
<AutoForm
formSchema={formSchema}
fields={[
{
id: 'max_members',
component: props => (
<AutoFormNullableNumber
{...props}
label="Maximum members"
min={1}
toggleLabel="Unlimited"
/>
),
},
]}
/>Value
The value is number | null. Checking the box stores null and disables the
input. Unchecking it restores the last number. Clearing the input stores 0.
Back it with z.number().nullable(). If the field can be
hidden, add a default so it never
blocks submission.
Labels
The second field in the preview uses all three labels:
<AutoFormNullableNumber
{...props}
label="Auto-logout"
orLabel="or"
toggleLabel="Never"
unitLabel="minutes"
/>Every other prop (min, max, step, format, placeholder…) goes to the
Number Field. Pass min/max here and in the
schema: the schema validates, the props clamp the buttons and keys.
Props
Prop
Type