Radio Button
A radio button is a component used by the user to choose a single option from a set of choices.
Anatomy
Radio Button anatomy.
Radio Button Input: The most recognizable part of a radio button is the small circular area that users click to make a selection. This circle has two distinct states: unselected and selected.
Radio Button label: This text describes the information associated with the radio button, indicating whether you want to select or deselect it. It provides a clear description next to the radio button input.
Hint: Optional text providing additional information about the purpose or usage of the radio button.
Sizes
Depending on your design system's requirements, you might create different sizes for your radio buttons. However, in most cases, one size is usually enough.
Radio Button sizes.
States
Unselected
The default state, where the circle is empty.
Unselected state.
Example.
Selected
When selected, the circle is filled with a dot or a solid circle to indicate the choice.
Selected state.
Example.
States communicate the status of a checkbox to the user.
Enabled: An enabled state communicates an interactive component.
Hover: A hover state communicates when a user has placed a cursor above an interactive element.
Focus: A focus state indicates when a user has selected or highlighted an element using an input method such as a keyboard or voice.
Disabled: A disabled state communicates a noninteractive component.
