Radio Group
Let people pick exactly one option from a short list, as a plain list or as clickable cards, with descriptions and disabled options.
Preview
Usage
import { AutoForm } from '@vitnode/core/components/form/auto-form'
import { AutoFormRadioGroup } from '@vitnode/core/components/form/fields/radio-group'
import { z } from 'zod'
const formSchema = z.object({
sort: z.enum(['latest', 'top', 'unanswered']).default('latest'),
})<AutoForm
formSchema={formSchema}
fields={[
{
id: 'sort',
component: (props) => (
<AutoFormRadioGroup
{...props}
label="Default sort"
labels={[
{
value: 'latest',
label: 'Latest activity',
description: 'New replies float up.',
},
{ value: 'top', label: 'Most liked' },
{ value: 'unanswered', label: 'Unanswered first', disabled: true },
]}
/>
),
},
]}
/>Options come from the z.enum(). labels only adds text: an enum value
without a label shows the raw value.
Arrow keys move between options and select them. Tab leaves the group.
Blocks
variant="blocks" turns each option into a clickable card. It's built from
Field choice cards.
<AutoFormRadioGroup
{...props}
label="Registration"
labels={labels}
variant="blocks"
/>Props
AutoFormRadioGroup also accepts every
Base UI Radio Group
prop.
Prop
Type