Radio
The Radio component allows users to select one option from a group. It supports a label, disabled state, and is built using a context-aware group container.
Default
<RadioGroup name="plan" value={value} onChange={setValue}>
<Radio id="basic" value="basic" label="Basic" />
<Radio id="pro" value="pro" label="Pro" />
<Radio id="enterprise" value="enterprise" label="Enterprise" />
</RadioGroup>Disabled
<RadioGroup name="plan" value={value} onChange={setValue}>
<Radio id="basic" value="basic" label="Basic" disabled />
<Radio id="pro" value="pro" label="Pro" disabled />
<Radio id="enterprise" value="enterprise" label="Enterprise" disabled />
</RadioGroup>Usage
The Radio component can be referenced using the following format:
import { RadioGroup, Radio } from "../../components/Radio";Accessibility
The radio group uses semantic <fieldset> and <legend> elements for accessibility. Each radio is labelled and fully keyboard accessible. Keyboard focus states are styled similarly to the checkbox component.