Radio Button
Radio buttons allow a single selection from a set of options. They should always be used in a group and it should always be valid to select only one of the options
Anatomy
Section titled “Anatomy”
- Label
- Container
- Message (Optional)
- Circle
- Container filled
How to use
Section titled “How to use”Use Radio button for single selection from a set of options.
- Use Radio button to select one option from a list
- Use Radio button to present a list containing sub-selections
- Use Radio button to turn an item on or off in a desktop environment
Dont’s
Section titled “Dont’s”- Do not use Radio button when more than one item can be selected from a list. Use checkboxes instead.
Variants
Section titled “Variants”Unselected
Section titled “Unselected”The unselected state for a Radio button with label refers to a radio button that has not been selected by the user, and it is accompanied by a text label that describes what the Radio button is for.
Selected
Section titled “Selected”The selected state for a Radio button with label refers to the status of a Radio button when it has been selected by the user. This selection is indicated by a ellipse and filled container.
States
Section titled “States”Radio buttons can be Selected and Unselected. Radio buttons have Enabled, Disabled, Hover, Focused and Pressed states when not selected.
Default
Section titled “Default”The Default state in Radio button refers to how it appears when it has not been interacted with. In this state, it typically consists of a container and a text label.
Displaying an Unselected Radio button with a label in its Default state.
Displaying an Selected Radio button with a label in its Default state.
A Hover state for a Radio button is displayed when the user moves their cursor over the Radio button, before they actually click on it. It’s usually used to indicate that the checkbox is interactive. There is no Hover state when in a Selected state.
Displaying an Unselected Radio button with a label in its Hover state.
Pressed
Section titled “Pressed”The Pressed state for a radio button refers to the visual representation when a user clicks or touches the checkbox but hasn’t yet released it. This state often indicates that the Radio button is active and ready to change status once the click or touch is released. There is no Pressed state when in a Selected state.
Displaying an Unselected Radio button with a label in its Pressed state.
Disabled
Section titled “Disabled”The Disabled state of a Radio button refers to a user interface element that users cannot interact with, typically because certain conditions haven’t been fulfilled.
Displaying an Unselected Radio button with a label in its Disabled state.
Displaying a Selected Radio button with a label in its Disabled state.
The Error state for a Radio button occurs when it is marked as incorrect. This typically happens when it hasn’t been appropriately filled out or selected as required.
Displaying an Unselected checkbox with a label in its Error state.
Displaying a Selected Radio button with a label in its Disabled state.
Color mode
Section titled “Color mode”
Displaying Radio buttons in light mode
Displaying Radio buttons in dark mode
Spacing
Section titled “Spacing”Spacing & placement
Section titled “Spacing & placement”Radio buttons are normally placed in a stacked format with a spacing of 16px spacer between each other.
Radio buttons using a 16px spacer when grouped.
Radio buttons horizontal oriented using a 16px spacer between.
Radio buttons and message using a 4px spacer between.
Orientation
Section titled “Orientation”Radio buttons can be placed both horizontally or vertically.
Vertical
Section titled “Vertical”
Displaying Radio buttons with label aligned vertically.
Horizontal
Section titled “Horizontal”
Displaying Radio buttons with label aligned horizontally.
Messages
Section titled “Messages”Hint message
Section titled “Hint message”Hint messages are short messages used to add more context or purpose.
Displaying a Radio button with label with Hint message.
Error message
Section titled “Error message”The Error message is shown when an error occurs. Error messages are shown above the Radio button group together with a change of border color.
Displaying a Radio button with label with Error message.
Hint and error message
Section titled “Hint and error message”Are used to support error message to explain what needs to be done.
Displaying a Radio Button with label with Error message and Hint message.
Char limit
Section titled “Char limit”Label: Max 40 char
Form message: Max 150 char
Examples
Section titled “Examples”add example
Accessibility
Section titled “Accessibility”Keyboard focus
Section titled “Keyboard focus”The Radio button component uses the default keyboard focus wrapped around the container.
Displaying Radio button with label on keyboard focus.
Considerations
Section titled “Considerations”
Use Radio buttons for single selection from a set of options.
Use Checkboxes instead of Radio buttons when more than one item can be selected from a list.
Don’t use Radio buttons when more than one item can be selected from a list.