Checkbox
A checkbox for yes-or-no choices like accepting rules or picking items, with checked, indeterminate, disabled and invalid states.
Preview
Usage
import { AutoForm } from '@vitnode/core/components/form/auto-form'
import { AutoFormCheckbox } from '@vitnode/core/components/form/fields/checkbox'
import { z } from 'zod'
const formSchema = z.object({
acceptRules: z.boolean().refine((value) => value, {
message: 'You need to accept the rules to join',
}),
})<AutoForm
formSchema={formSchema}
fields={[
{
id: 'acceptRules',
component: (props) => (
<AutoFormCheckbox {...props} label="I accept the community rules" />
),
},
]}
/>States
indeterminatedraws a dash, for "some selected".disableddims it. Adddata-disabledto the parent Field to dim the label too.aria-invalidturns it red. Pointaria-describedbyat the error.
<Field data-invalid orientation="horizontal">
<Checkbox aria-describedby="rules-error" aria-invalid id="rules" />
<FieldContent>
<FieldLabel htmlFor="rules">I have read the community rules</FieldLabel>
<FieldError id="rules-error">Tick this one to post.</FieldError>
</FieldContent>
</Field>Every checkbox needs a label. The hit area reaches beyond the box, so it's easy to tap on a phone.
Props
AutoFormCheckbox also accepts every Base UI Checkbox prop.
Prop
Type