Radio Button
Radio buttons are a control element used to allow users to select one option from a set of mutually exclusive choices. They are ideal for situations where only one selection is allowed.
Usage
- Use radio buttons to present multiple choice questions or options where only one can be selected.
- Use radio buttons in filtering interfaces to allow users to select one filter criterion at a time.
Anatomy
A radio button comprises a circular container containing a radio icon, a button label, and accompanying text, forming the complete radio button element for user interaction
Variant
Radio button comes in two variants with text label and without text label.
With Text Label
Without Text Label
With Text Label
Without Text Label
States
Radio button can be selected or unselected. Radio button have default, hovered & disabled states.
Radio Button
Selected / Default
Selected / Disabled
Unselected / Default
Unselected / Disabled
Radio Icon
Selected / Default
Selected / Disabled
Unselected / Default
Unselected / Disabled
Sizes
Radio button are available in small, medium and large sizes.
Small
Medium
large
Specifications
Structure and spacing measurements for radio button.
Live Demo
The Radio is demonstrated in a live environment in this demo.