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 anatomyRadio 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 sizesRadio Button sizes.

States

Unselected

The default state, where the circle is empty.

Unselected stateUnselected state.

ExampleExample.

Selected

When selected, the circle is filled with a dot or a solid circle to indicate the choice.

Selected stateSelected state.

ExampleExample.

States communicate the status of a checkbox to the user.

States

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.

Preview in Figma