Radio
A form input component that provides a radio button interface for single selection from a group of options.Basic Radio
Creates a standard radio button with a label.
Options
The Radio component supports various configuration options.checked: Whether the radio button is checked (default: false)value: The value of the radio button when selecteddisabled: Whether the radio button is disabledrequired: Whether the radio button is requiredreadonly: Whether the radio button is readonlyname: The name of the radio button groupform: The form ID the radio button belongs to
Radio Examples
Here are examples of different ways to use the radio component.Checked Radio
Creates a pre-selected radio button.
Styled Radio
Creates a radio button with a specific Bootstrap style.
Full-featured Radio
Creates a radio button with all available customizations.
API
The radio component extends from theInput class so it has all its methods available.Common alternative names: Radio Button, Option Button, Selection Button, Choice Button, Single Select, Option Control
Types: Basic Radio, Checked Radio, Required Radio, Disabled Radio, Styled Radio
Principles
Single Selection
Radio buttons provide a clear single-selection interface, making it obvious that the user can only select one option from a group.
Visual Feedback
The component provides immediate visual feedback through its checked state and styling.
Accessibility
Maintains keyboard accessibility and screen reader compatibility while providing a modern visual interface.
Anatomy
- Container
- Input
- Label
- Hint
Outer wrapper with form-check class
Radio input element
Text description of the radio button's purpose
Optional helper text below the radio button
Usage
Use radio buttons for:
- Single selection from multiple options
- Preference settings
- Mode selection
- Category selection
- Type selection
- Status selection
- Priority selection