Avala Design
← Components/primitives

RadioButton

RadioButton + RadioButtonGroup — primitives.

primitivesstablea11y: untested3/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { RadioButton, RadioButtonGroup } from "@avala/design";

<RadioButton>
  <RadioButtonGroup />
</RadioButton>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-radiobutton--defaultOpen in Storybook →

When to use

  • Single-of-many selection: 2-7 mutually exclusive options the user picks one of.
  • The full set of options is short and worth showing inline.

When not to use

  • More than 7 options → use `Select` (inline radios stop scaling visually past that).
  • Multi-of-many selection → use `Checkbox`.
  • Binary on/off → use `Toggle` or `Switch`.
  • Tab-style content switching → use `Tabs` or ContentSwitcher pattern.