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.
There are fives Checkbox states: enabled, hover, focus, disabled, invalid, and optional.
Radio Buttons in their "unchecked" state are considered enabled. They are ready for user interaction.
Hover states are activated when the user pauses their pointer over the input.
The focus state is a visual affordance that the user has highlighted the input with a pointer, keyboard, or voice.
Checked Radios display a blue fill to indicate the they are selected.
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.
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.
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.