Radix homepage
Components

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
export const RadioGroup = RadioGroupPrimitive.Root;
export const RadioGroupRadio = StyledRadio;
export 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 RadioGroupDemo = () => (
<form>
<RadioGroup defaultValue="default" aria-label="View density">
<Flex css={{ margin: '10px 0', alignItems: 'center' }}>
<RadioGroupRadio value="default" id="r1">
<RadioGroupIndicator />
</RadioGroupRadio>
<Label htmlFor="r1">Default</Label>
</Flex>
<Flex css={{ margin: '10px 0', alignItems: 'center' }}>
<RadioGroupRadio value="comfortable" id="r2">
<RadioGroupIndicator />
</RadioGroupRadio>
<Label htmlFor="r2">Comfortable</Label>
</Flex>
<Flex css={{ margin: '10px 0', alignItems: 'center' }}>
<RadioGroupRadio value="compact" id="r3">
<RadioGroupIndicator />
</RadioGroupRadio>
<Label htmlFor="r3">Compact</Label>
</Flex>
</RadioGroup>
</form>
);
export default RadioGroupDemo;

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

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

Contains all the parts of a radio group.

PropTypeDefault
asChildbooleanfalse
defaultValuestringNo default value
valuestringNo default value
onValueChangefunctionNo default value
namestringNo default value
requiredbooleanNo default value
orientationenumundefined
direnumNo default value
loopbooleantrue

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

PropTypeDefault
asChildbooleanfalse
valuestringNo default value
disabledbooleanNo default value
requiredbooleanNo default value
Data AttributeValues
[data-state]"checked" | "unchecked"
[data-disabled]Present when disabled

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
asChildbooleanfalse
forceMountbooleanNo default value
Data AttributeValues
[data-state]"checked" | "unchecked"
[data-disabled]Present when disabled

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.
ArrowDownMoves focus and checks the next radio item in the group.
ArrowRightMoves focus and checks 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.