Radio Button

An input for selection control that often appears when users are asked to make a decision, or select from the options presented to them.

Anatomy

Item	Name	Description	Component
1	Radio input (unchecked)	Selection control (input).	Radio
2	Radio input (checked)	Selection control (input).	Radio
3	Label	Text attributed to the radio for context.	Label
4	Group label	Optional \| Text attributed to the checkbox group for context.	-

Color

Element	Property	Token
Radio label	text color	text.static.primary
Radio unchecked	border	border.interactive.default
	background-color	none (inherit parent)
Radio checked		background.interactive.primary.default
	icon	text.static.inverse
Helper text	text color	text.static.error

Good to know

This component is composed of at least two parts: the radio input and the label. The group label is an optional part of the component if it's not used as part of a form. You can substitute a group label with a different text component. A radio input can exist separately as part of a different component but not as a standalone element.

Specifications & Properties

Spacing

Raw value	Token
12px	spacing.150
8px	spacing.100

Optional elements

Item	Name	Description
1	Label	It's the group title
2	Error Message	It indicates an error

Alignment

Radio button labels are positioned to the right of their inputs. If there is a radio button grouping, they can be laid out vertically or horizontally, depending on the use case and the structure of the UI. When possible, arrange the radio butto and radio butto groups vertically for easy scanning.

If possible, try to reword labels to avoid text overflow.

If unavoidable, the text can overflow to multiple lines.

Placement

In forms, radio buttons should be placed at least 32px below, or before the next component. Use spacings of 24px or 16px, which can also be used when space is more restricted, or if the form is more complex.

States

The default view of a radio button is having one radio button pre-selected. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.

The radio button states are composed of two strings:

Unchecked and checked.

Default, hover, active and disabled.

Item	State		Description
1	Read only Default	A Unchecked B Checked	The default style before the user interacts with the radio button.
2	Hover	A Unchecked B Checked	The radio button changes style to let the user know it’s interactive. The style of the label remains the same. Users can (hover) interact with the label to check the radio button.
3	Active	A Unchecked B Checked	The radio box input changes style to let the user know the radio box is checked. The style of the label remains the same.
4	Disabled	A Unchecked B Checked	Communicates that a radio button exists, but isn’t available in that scenario. When the user hovers over a radio button in a disabled state, the cursor shows as ‘not allowed’.