Radio Group
A set of checkable buttons—known as radio buttons—where no more than one button can be checked at a time.
Radio groups provide users with a set of mutually exclusive options. Our component ensures that focus and selection are handled correctly for keyboard users.
Accessibility Features
- Roving Tabindex: Only the selected radio button is focusable via
Tab. Arrow keys are used to change selection. - Automatic Labels: Connects each radio item with its label and the entire group with a fieldset/legend or
aria-labelledby.
Usage Example
import { RadioGroup, RadioGroupItem } from '@holmdigital/components'; <RadioGroup defaultValue="comfortable"> <div className="flex items-center space-x-2"> <RadioGroupItem value="default" id="r1" /> <label htmlFor="r1 text-sm font-medium">Default</label> </div> <div className="flex items-center space-x-2"> <RadioGroupItem value="comfortable" id="r2" /> <label htmlFor="r2 text-sm font-medium">Comfortable</label> </div> </RadioGroup>