Version: 3.5.13

Radio Button

Radio buttons allow users to select a single option from a set of mutually exclusive options. Use radio buttons when only one selection is allowed.

Overview

Radio buttons are form controls that allow users to select exactly one option from a set of mutually exclusive options. They provide a clear visual indication of selection state and are always displayed in groups.

All radio button styles are built using design tokens, ensuring consistency across themes and hues. Use the interactive playground below to explore all available combinations.

Interactive Playground

Use the controls to customize the radio button and see how it looks in real-time. Toggle between themes and hues to see how radio buttons adapt to different contexts.

Color
Selected
Label

Radio Button

<RadioButton />
Anatomy

A radio button consists of a circular button element and an optional label. The button displays different visual states based on selection and interaction.

Radio Button

Radio Button Circle20px × 20px, border-radius: 100%
LabelOptional text label
Variants & States

Radio buttons come in different states to fit various use cases. Each state provides clear visual feedback for user interaction.

Unselected - Default

Default when unselected. Thin border with transparent background.

Radio Button

Unselected - Hovered

Hover shows visual feedback on pointer over the radio button.

Radio Button

Unselected - Focused

Focus indicates keyboard navigation with a visible focus ring.

Radio Button

Unselected - Pressed

Pressed gives feedback when the radio button is clicked or pressed.

Radio Button

Unselected - Disabled

Disabled blocks interaction with reduced opacity and colors.

Radio Button

Selected - Default

Selected uses thick border in primary with white inner circle.

Radio Button

Selected - Hovered

Selected hover uses a darker primary border.

Radio Button

Selected - Focused

Selected focus shows a primary-colored focus ring.

Radio Button

Selected - Pressed

Selected pressed uses a darker primary border.

Radio Button

Selected - Disabled

Selected disabled shows reduced opacity and disabled primary.

Radio Button

Usage Guidelines
Do
  • Use radio buttons for mutually exclusive options.
  • Use radio buttons when only one selection is allowed.
  • Group related radio buttons together.
  • Provide clear, descriptive labels for each radio button.
  • Use radio button groups for 2-7 options.
  • Ensure one option is selected by default when appropriate.
Don't
  • Don't use radio buttons for multiple selections (use checkboxes instead).
  • Don't use radio buttons for immediate actions (use buttons instead).
  • Don't use radio buttons without labels.
  • Don't use too many radio buttons in a single group (consider dropdown).
  • Don't disable radio buttons without explaining why.
  • Don't use radio buttons for single on/off toggles (use switches instead).
Accessibility
  • Always associate radio buttons with labels using proper HTML structure or ARIA attributes.
  • Ensure sufficient color contrast between radio button states and backgrounds.
  • Provide keyboard navigation support (Arrow keys to navigate, Space to select).
  • Use semantic HTML (`<input type="radio">` or proper ARIA roles).
  • Group related radio buttons with `<fieldset>` and `<legend>`.
  • Ensure radio buttons are large enough to be easily clickable (minimum 20px).
  • Provide clear visual feedback for all interactive states (hover, focus, selected).
API Reference

Radio Button component props and types.

RadioButtonProps
interface RadioButtonProps { selected?: boolean; disabled?: boolean; status?: "default" | "hovered" | "focused" | "pressed" | "disabled"; label?: string; showLabel?: boolean; onChange?: (selected: boolean) => void; }
Props
selected
boolean
false
Whether the radio button is selected. When true, displays thick border with primary color and white inner circle.
status
"default" | "hovered" | "focused" | "pressed" | "disabled"
"default"
Interactive state of the radio button. Controls visual styling for different interaction states.
label
string
"Radio Button"
Text label displayed next to the radio button.
showLabel
boolean
true
Whether to display the label text. When false, label is only used for accessibility.
disabled
boolean
false
Whether the radio button is disabled. When true, prevents interaction and applies disabled styling.
onChange
(selected: boolean) => void
—
Callback function called when radio button state changes.
Usage Examples

Copyable code snippets for common radio button use cases.

Basic Radio Button
import { RadioButton } from 'beacon-ui'; <RadioButton />
Radio Button with Label
import { RadioButton } from 'beacon-ui'; <RadioButton label="Option 1" />
Selected Radio Button
import { RadioButton } from 'beacon-ui'; <RadioButton selected label="Selected" />
Disabled Radio Button
import { RadioButton } from 'beacon-ui'; <RadioButton selected disabled label="Disabled" />
Radio Button Group
import { RadioButton } from 'beacon-ui'; <div> <RadioButton label="Option 1" /> <RadioButton label="Option 2" selected /> <RadioButton label="Option 3" /> </div>
Radio Button with States
import { RadioButton } from 'beacon-ui'; <RadioButton label="Default" status="default" /> <RadioButton label="Hovered" status="hovered" /> <RadioButton label="Focused" status="focused" /> <RadioButton label="Pressed" status="pressed" /> <RadioButton label="Disabled" disabled />