Choice1 check
FormRadioGroup
One choice, every option visible.
Example
Installation
bunx --bun shadcn@latest add @fieldkit/form-radio-groupNeeds the @fieldkit registry. Add it once
Usage
- 1
Add the field to your schema
schema.tsimport { z } from "zod"import { optionField } from "@/lib/field-schemas" export const schema = z.object({ plan: optionField(["monthly", "yearly"], "Choose a plan"),}) - 2
Render it inside a Form
The name prop matches the schema key.
example-form.tsximport { Form } from "@/components/form/form"import { FormRadioGroup } from "@/components/form/form-radio-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={{ plan: "" }} onSubmit={save} > <FieldGroup> <FormRadioGroup name="plan" options={plans} /> <FormSubmit>Save</FormSubmit> </FieldGroup> </Form> )}
Checks
CheckOptionError message
One of the options
optionFieldChoose a planBest practices
- Use for 5 options or fewer
Try these values
Terminal
optionField(["monthly", "yearly"], "Choose a plan")| Input | Result | Output |
|---|---|---|
"yearly" | Valid | "yearly" |
"weekly" | Invalid | Choose a plan |
"" | Invalid | Choose a plan |
API reference
FormRadioGroup
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.