Choice1 check
FormCheckboxGroup
Several choices, every option visible.
Example
Installation
bunx --bun shadcn@latest add @fieldkit/form-checkbox-groupNeeds the @fieldkit registry. Add it once
Usage
- 1
Add the field to your schema
schema.tsimport { z } from "zod"import { optionsField } from "@/lib/field-schemas" export const schema = z.object({ channels: optionsField({ min: 1, noun: "channel" }),}) - 2
Render it inside a Form
The name prop matches the schema key.
example-form.tsximport { Form } from "@/components/form/form"import { FormCheckboxGroup } from "@/components/form/form-checkbox-group"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={{ channels: [] }} onSubmit={save} > <FieldGroup> <FormCheckboxGroup name="channels" options={channels} /> <FormSubmit>Save</FormSubmit> </FieldGroup> </Form> )}
Checks
CheckOptionError message
Fewest and most
min, maxChoose at least 1 channelBest practices
- Short options sit in a row
Try these values
Terminal
optionsField({ min: 1, noun: "channel" })| Input | Result | Output |
|---|---|---|
["email","sms"] | Valid | ["email","sms"] |
[] | Invalid | Choose at least 1 channel |
API reference
FormCheckboxGroup
PropDescription
options (required)Array<{ value, label, description?, disabled? }>The choices.orientation"auto" | "vertical" | "horizontal" = "auto"Row when options fit, column otherwise.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.