Import
import {
RadioGroup,
Radio,
RadioControl,
RadioGroupLabel,
RadioLabel,
} from '@ark-ui/react'Usage
The RadioGroup component consists of the RadioControl, Radio,
RadioGroupLabel and RadioLabel components. Combine them as desired to fit
your design system.
<RadioGroup>
<RadioGroupLabel>Fruits</RadioGroupLabel>
{[
{ id: 'apple', label: 'Apples' },
{ id: 'orange', label: 'Oranges' },
{ id: 'mango', label: 'Mangoes' },
{ id: 'grape', label: 'Grapes' },
].map((option, id) => (
<Radio key={id} value={option.id}>
<RadioLabel>{option.label}</RadioLabel>
<RadioControl />
</Radio>
))}
</RadioGroup>Disabling the radio group
To make a radio group disabled, set the disabled prop to true.
<RadioGroup disabled>{/*...*/}</RadioGroup>Making the radio group readonly
To make a radio group readonly, set the readOnly prop to true.
<RadioGroup readOnly>{/*...*/}</RadioGroup>Setting the initial value
To set the radio group’s initial value, set the defaultValue prop to the value
of the radio item to be selected by default.
<RadioGroup defaultValue="apple">{/*...*/}</RadioGroup>Listening for changes
When the radio group value changes, the onChange callback is invoked.
<RadioGroup onChange={(details) => console.log(details.value)}>
{/*...*/}
</RadioGroup>