Radio Field
Radio button group component integrated with TanStack Form. Options are defined as Array<{label, value}>.
npx shadcn@latest add https://shuip.plvo.dev/r/tsf-radio-field.json
Preview
Loading...
Radio groups let users select a single option from a list. RadioField uses Radix UI's RadioGroup with automatic label associations and proper ARIA attributes. Unlike SelectField, radio buttons show all options upfront—ideal for 2-5 choices where comparison is important.
The options prop takes an array of {label, value} objects, making it easy to map from data structures. Each radio button gets a unique ID combining the field name and value, ensuring proper accessibility.
Built-in features
- Visible all-at-once for easy comparison
- Array-based options with label/value structure
- Automatic label linking with unique IDs per option
- Single-selection enforcement via RadioGroup
Options structure
const options = [{ label: 'Display Text 1', value: 'val1' },{ label: 'Display Text 2', value: 'val2' },]<RadioFieldform={form}name='choice'options={options}label='Select one'/>
Examples
Conditional Pricing
Loading...
Default
Loading...
Payment Method
Loading...
Props
| Name | Type | Description |
|---|---|---|
| form | ReactFormApi<TFormData> | Form instance from useForm hook |
| name | DeepKeys<TFormData> | Type-safe field name (supports nested paths like "user.plan") |
| options | Array<{ label: string; value: string }> | Array of radio button options with label and value |
| label | string? | Field label text |
| description | string? | Helper text displayed below the radio group |
| formProps | Partial<FieldOptions>? | TanStack Form field options (validators, etc.) |
| fieldProps | React.ComponentProps<typeof Field>? | Props passed to the Field wrapper component |
| props | React.ComponentProps<typeof RadioGroup>? | Props passed to the RadioGroup component |