Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Features

  • Full keyboard navigation.
  • Supports horizontal/vertical orientation.
  • Can be controlled or uncontrolled.

Install the component from your command line.

npm install @radix-ui/react-radio-group

Import the components and piece the parts together.

import * as RadioGroup from '@radix-ui/react-radio-group';
export default () => (
<RadioGroup.Root>
<RadioGroup.Item>
<RadioGroup.Indicator />
</RadioGroup.Item>
</RadioGroup.Root>
);

Create your styled radio group component from the primitive parts.

import { styled } from 'path-to/stitches.config';
import * as RadioGroup from '@radix-ui/react-radio-group';
const StyledRadio = styled(RadioGroup.Item, {
appearance: 'none',
backgroundColor: 'transparent',
border: 'none',
padding: 0,
borderRadius: '50%',
boxShadow: 'inset 0 0 0 1px gainsboro',
width: 15,
height: 15,
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
verticalAlign: 'middle',
'& ~ &': { marginLeft: 5 },
'&:focus': {
outline: 'none',
boxShadow: 'inset 0 0 0 1px dodgerblue, 0 0 0 1px dodgerblue',
},
});
const StyledIndicator = styled(RadioGroup.Indicator, {
width: 7,
height: 7,
borderRadius: '50%',
backgroundColor: 'dodgerblue',
});
export default () => (
<RadioGroup.Root>
<StyledRadio value="cat">
<StyledIndicator />
</StyledRadio>
<StyledRadio value="dog">
<StyledIndicator />
</StyledRadio>
<StyledRadio value="rabbit">
<StyledIndicator />
</StyledRadio>
</RadioGroup.Root>
);

Contains all the parts of a radio group.

PropTypeDefault
asenumdiv
defaultValuestringNo default value
valuestringNo default value
onValueChangefunctionNo default value
requiredbooleanNo default value
orientationenumundefined
direnum"ltr"
loopbooleantrue

An item in the group that can be checked.

PropTypeDefault
asenumbutton
namestringNo default value
valuestringNo default value
onCheckedChangefunctionNo default value
disabledbooleanNo default value
requiredbooleanNo default value

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.

PropTypeDefault
asenumspan
forceMountbooleanNo default value

Adheres to the Radio Group WAI-ARIA design pattern and uses roving tabindex to manage focus movement among radio items.

KeyDescription
TabMoves focus to either the checked radio item or the first radio item in the group.
SpaceWhen focus is on an unchecked radio item, checks it.
EnterWhen focus is on an unchecked radio item, checks it.
ArrowDownMoves focus to the next radio item in the group.
ArrowRightMoves focus to the next radio item in the group.
ArrowUpMoves focus to the previous radio item in the group.
ArrowLeftMoves focus to the previous radio item in the group.