bellhop by actabl

Components

search
Accordion
App Bar
Avatar
Avatar Stacked
Badge
Badge Dot
Breadcrumbs
Button
Button Icon
Card
Checkbox
Checkbox Group
Container
Data Grid
Date Picker
Date Range Picker
Dropdown
Empty State
Illustrations
Input Autocomplete
Input Number
Input Password
Input Text
Input Verification
Loader Spinner
Logo Box
Modal
Notification
Page Navigation
Pagination
Popover
Product Switcher
Property Switcher
Radio Button
Sidebar
Skeleton Loader
Tabs
Tag
Textarea
Toggle
Tooltip

Radio Button

Radio button component with optional label and supporting text. Radio buttons allow users to select exactly one option from a set of mutually exclusive choices.

When to use

Use radio buttons when users must select exactly one option from a list of mutually exclusive choices.

Single Selection

Allow users to choose only one option from a set of choices.

Visible Options

Display all available options at once for easy comparison.

Plan Selection

Choose between different plans, pricing tiers, or service levels.

When not to use

  • When users need to select multiple options—use checkboxes instead
  • For yes/no or on/off decisions—use a toggle or single checkbox instead
  • When there are more than 7 options—consider using a select dropdown for better space efficiency
  • For optional single selections where users can deselect—consider using a select with a "None" option

Anatomy

Radio buttons consist of several key parts that work together to create an effective form control.

  1. Radio Control

    The circular button that indicates selected or unselected state

  2. Label (Optional)

    Text that describes what the radio button represents

  3. Supporting Text (Optional)

    Additional context or helper text that appears below the label

States

Radio buttons support multiple states to provide clear feedback to users.

Unselected

Default state when not selected

Selected

Active state with filled center

Disabled

Not available for interaction

Sizes

Radio buttons come in two sizes to suit different UI contexts.

Interactive Examples

See how radio buttons work in real-world scenarios.

Radio Group

All States

Best Practices

Follow these guidelines when using radio buttons.

Do

  • Use radio buttons when there are 2-5 mutually exclusive options
  • Display all options at once for easy comparison
  • Group related radio buttons together
  • Provide clear, concise labels
  • Use one radio button selected by default when appropriate

Don't

  • Don't use radio buttons for multiple selection (use checkboxes instead)
  • Don't use radio buttons when there are more than 7 options (consider a select dropdown)
  • Don't allow users to deselect all options if a choice is required
  • Don't use radio buttons for yes/no questions (use a toggle or checkbox)

Accessibility

Radio buttons are designed to be accessible to all users.

Keyboard Navigation

  • Tab - Move focus to the radio group
  • Arrow Keys - Navigate between radio options
  • Space - Select focused radio button
  • Shift + Tab - Move focus to previous element

Screen Reader

  • Radio role is properly announced
  • Label text is clearly communicated
  • Selected/unselected state is announced
  • Disabled state is communicated
  • Group membership is indicated

Focus Indicator

  • Visible focus ring on keyboard navigation
  • High contrast border for visibility
  • Maintains 3:1 contrast ratio

Resources

Design and development resources for the Radio Button component.

Figma

Available
View in Figma →

Web Components/Angular

Available
View in Storybook →

React

Available
View in Storybook →