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.
Can be controlled or uncontrolled.

Installation

Install the component from your command line.

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

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

Anatomy

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>
);

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

Basic example

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>
);

// 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>
);

API Reference

RadioGroup

Contains all the parts of a radio group.

Prop	Type	Default
`as`	`enum`	`div`
`defaultValue`	`string`
`value`	`string`
`onValueChange`	`function`
`required`	`boolean`

Item

An item in the group that can be checked.

Prop	Type	Default
`as`	`enum`	`button`
`name`	`string`
`value`	`string`
`onCheckedChange`	`function`
`disabled`	`boolean`
`required`	`boolean`
`readOnly`	`boolean`

Indicator

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.

Prop	Type	Default	Required
`as`	`enum`	`span`
`forceMount`	`boolean`

Accessibility

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

Keyboard Interactions

Key	Description
`Tab`	Moves focus to either the checked radio item or the first radio item in the group.
`Space`	When focus is on an unchecked radio item, checks it.
`Enter`	When focus is on an unchecked radio item, checks it.
`ArrowDown`	Moves focus to the next radio item in the group.
`ArrowRight`	Moves focus to the next radio item in the group.
`ArrowUp`	Moves focus to the previous radio item in the group.
`ArrowLeft`	Moves focus to the previous radio item in the group.