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.

import React from 'react';
import { styled } from '@stitches/react';
import { violet, blackA } from '@radix-ui/colors';
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
const StyledRadio = styled(RadioGroupPrimitive.Item, {
all: 'unset',
backgroundColor: 'white',
width: 25,
height: 25,
borderRadius: '100%',
boxShadow: `0 2px 10px ${blackA.blackA7}`,
'&:hover': { backgroundColor: violet.violet3 },
'&:focus': { boxShadow: `0 0 0 2px black` },
const StyledIndicator = styled(RadioGroupPrimitive.Indicator, {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
position: 'relative',
'&::after': {
content: '""',
display: 'block',
width: 11,
height: 11,
borderRadius: '50%',
backgroundColor: violet.violet11,
// Exports
const RadioGroup = RadioGroupPrimitive.Root;
const RadioGroupRadio = StyledRadio;
const RadioGroupIndicator = StyledIndicator;
// Your app...
const Flex = styled('div', { display: 'flex' });
const Label = styled('label', {
color: 'white',
fontSize: 15,
lineHeight: 1,
userSelect: 'none',
paddingLeft: 15,
export const CheckboxDemo = () => (
<RadioGroup defaultValue="default" aria-label="View density">
<Flex css={{ margin: '10px 0', alignItems: 'center' }}>
<RadioGroupRadio value="default" id="r1">
<RadioGroupIndicator />
<Label htmlFor="r1">Default</Label>
<Flex css={{ margin: '10px 0', alignItems: 'center' }}>
<RadioGroupRadio value="comfortable" id="r2">
<RadioGroupIndicator />
<Label htmlFor="r2">Comfortable</Label>
<Flex css={{ margin: '10px 0', alignItems: 'center' }}>
<RadioGroupRadio value="compact" id="r3">
<RadioGroupIndicator />
<Label htmlFor="r3">Compact</Label>
export default CheckboxDemo;


  • 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 all parts and piece them together.

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

Contains all the parts of a radio group.

defaultValuestringNo default value
valuestringNo default value
onValueChangefunctionNo default value
namestringNo default value
requiredbooleanNo default value

An item in the group that can be checked. An input will also render when used within a form to ensure events propagate correctly.

valuestringNo 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.

forceMountbooleanNo default value

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

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.