Skip to main content
Odyssey Design System
Odyssey Design System

Radio Button

Radios appear as a ring shaped UI accompanied by a caption that allows the user to choose only one option at a time.

# Anatomy

# Behavior

Radio Buttons allow users to select one option from a set. Users can click a Radio to make a choice; selecting another will deselect the last.

Select speed

# States

There are fives Checkbox states: enabled, hover, focus, disabled, invalid, and optional.

# Enabled

Radio Buttons in their "unchecked" state are considered enabled. They are ready for user interaction.

# Hover

Hover states are activated when the user pauses their pointer over the input.

# Focus

The focus state is a visual affordance that the user has highlighted the input with a pointer, keyboard, or voice.

# Checked

Checked Radios display a blue fill to indicate the they are selected.

# Disabled

Disabled inputs are unavailable for interaction and cannot be focused. They can be used when input is disallowed, possibly due to a system state or access restrictions.

Radios are disabled by option.

# Optional

Odyssey assumes inputs are required by default. Optional inputs should be used to indicate when data is not required for the user to complete a task.

Select speed Optional

# Invalid

Radios present as invalid when a required input is left unchecked or an incompatible choice has been made.

When indicating a validation error, please use a Field Error label to indicate the nature of the error. Color alone is not an accessible way to signify that something has gone wrong.

Unlike Checkboxes, Radios validate as a group, not individually.

Select speed