Radio
An easily stylable radio button component.
Anatomy
Radio is always placed within Radio Group. Import the components and place them together:
import { Radio } from '@base-ui-components/react/radio';
import { RadioGroup } from '@base-ui-components/react/radio-group';
<RadioGroup>
<Radio.Root>
<Radio.Indicator />
</Radio.Root>
</RadioGroup>
API reference
RadioGroup
Provides a shared state to a series of radio buttons. Renders a <div>
element.
Prop | Type | Default | |
---|---|---|---|
name |
|
| |
defaultValue |
|
| |
value |
|
| |
onValueChange |
|
| |
disabled |
|
| |
readOnly |
|
| |
required |
|
| |
inputRef |
|
| |
className |
|
| |
render |
|
|
Attribute | Description | |
---|---|---|
data-disabled | Present when the radio group is disabled. |
Root
Represents the radio button itself.
Renders a <button>
element and a hidden <input>
beside.
Prop | Type | Default | |
---|---|---|---|
value* |
|
| |
nativeButton |
|
| |
disabled |
|
| |
readOnly |
|
| |
required |
|
| |
inputRef |
|
| |
className |
|
| |
render |
|
|
Attribute | Description | |
---|---|---|
data-checked | Present when the radio is checked. | |
data-unchecked | Present when the radio is not checked. | |
data-disabled | Present when the radio is disabled. | |
data-readonly | Present when the radio is readonly. | |
data-required | Present when the radio is required. | |
data-valid | Present when the radio is in valid state (when wrapped in Field.Root). | |
data-invalid | Present when the radio is in invalid state (when wrapped in Field.Root). | |
data-dirty | Present when the radio's value has changed (when wrapped in Field.Root). | |
data-touched | Present when the radio has been touched (when wrapped in Field.Root). | |
data-filled | Present when the radio is checked (when wrapped in Field.Root). | |
data-focused | Present when the radio is focused (when wrapped in Field.Root). |
Indicator
Indicates whether the radio button is selected.
Renders a <span>
element.
Prop | Type | Default | |
---|---|---|---|
className |
|
| |
keepMounted |
|
| |
render |
|
|
Attribute | Description | |
---|---|---|
data-checked | Present when the radio is checked. | |
data-unchecked | Present when the radio is not checked. | |
data-disabled | Present when the radio is disabled. | |
data-readonly | Present when the radio is readonly. | |
data-required | Present when the radio is required. | |
data-valid | Present when the radio is in valid state (when wrapped in Field.Root). | |
data-invalid | Present when the radio is in invalid state (when wrapped in Field.Root). | |
data-dirty | Present when the radio's value has changed (when wrapped in Field.Root). | |
data-touched | Present when the radio has been touched (when wrapped in Field.Root). | |
data-filled | Present when the radio is checked (when wrapped in Field.Root). | |
data-focused | Present when the radio is focused (when wrapped in Field.Root). |
Examples
Form integration
To use a radio group in a form:
- Pass the group’s
name
toField
- Use
Field.Label
to label each radio - Use the
render
prop to render the field as aFieldset
in order to label the group
<Form>
<Field.Root name="shipping" render={<Fieldset.Root />}>
<Fieldset.Legend>Shipping method</Fieldset.Legend>
<RadioGroup>
<Field.Label>
<Radio.Root value="standard" />
Standard
</Field.Label>
<Field.Label>
<Radio.Root value="express" />
Express
</Field.Label>
<RadioGroup>
</Field.Root>
</Form>