A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
import React from 'react';import * as RadioGroup from '@radix-ui/react-radio-group';import './styles.css';const RadioGroupDemo = () => (<form><RadioGroup.Root className="RadioGroupRoot" defaultValue="default" aria-label="View density"><div style={{ display: 'flex', alignItems: 'center' }}><RadioGroup.Item className="RadioGroupItem" value="default" id="r1"><RadioGroup.Indicator className="RadioGroupIndicator" /></RadioGroup.Item><label className="Label" htmlFor="r1">Default</label></div><div style={{ display: 'flex', alignItems: 'center' }}><RadioGroup.Item className="RadioGroupItem" value="comfortable" id="r2"><RadioGroup.Indicator className="RadioGroupIndicator" /></RadioGroup.Item><label className="Label" htmlFor="r2">Comfortable</label></div><div style={{ display: 'flex', alignItems: 'center' }}><RadioGroup.Item className="RadioGroupItem" value="compact" id="r3"><RadioGroup.Indicator className="RadioGroupIndicator" /></RadioGroup.Item><label className="Label" htmlFor="r3">Compact</label></div></RadioGroup.Root></form>);export default RadioGroupDemo;
Full keyboard navigation.
Supports horizontal/vertical orientation.
Can be controlled or uncontrolled.
Install the component from your command line.
Import all parts and piece them together.
Contains all the parts of a radio group.
An item in the group that can be checked. An input
will also render when used within a form
to ensure events propagate correctly.
Renders when the radio item is in a checked state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.
Adheres to the Radio Group WAI-ARIA design pattern and uses roving tabindex to manage focus movement among radio items.