Loading...
A control element used to allow users to make a single selection from a predefined set of mutually exclusive options.
Can be controlled or uncontrolled
Full keyboard navigation
Simplified API
Handles invalid appearance
Multiple sizes
Easy to customize
Respects reduce motion with system settings and through props
There’s an additional component built specifically for easy and clean isomorphic form validation. It leverages Conform and Zod, providing a single source of truth for both frontend and backend while preserving native browser validation APIs (Conform works with any valid HTML form and captures form values using the FormData Web API). It also seamlessly integrates with the latest React 19 hook:
| Prop | Type | Default |
|---|---|---|
size | enum | "default" |
invalid | boolean | ― |
reduceMotion | boolean | false |
options* | RadioOption[] | ― |
| Prop | Type | Default |
|---|---|---|
size | enum | "default" |
invalid | boolean | ― |
reduceMotion | boolean | false |
Support all Radix API
Support all Radix API
Support all Radix API
// Option #1. Basic usage:
<RadioGroup />
// Option #2. Custom usage:
<RadioGroupRoot>
<RadioGroupItem>
<RadioGroupIndicator />
</RadioGroupItem>
</RadioGroupRoot>
RadioGroupFielduseActionState