Nav open / close arrow


Using this Component

Radio buttons should be used when a user can select only one element from a mutually exclusive list.


All radio buttons should have an adjacent label. To provide more context to the selection, the list items can be used beneath a UIHeader.


If there are too many options in the list, consider using a dropdown selection instead. For instances where multiple elements should be selectable, see UICheckbox.



Radio buttons are directly interactive elements. When selecting an item from a list, only one may be selected at a time. Clicking another option will cause the prior selection to become deselected.

The default state for all radio buttons is deselected, unless due to a specific feature, or saved state.

Clickable Area

Clicking anywhere on the radio button, as well as anywhere on its label (when possible) should toggle the state (when not already selected).

Related Components

Last Updated

August 6, 2020

Coming soon...

Component code details for this component are not currently available, but we're working on it!

Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.

Eng Description

Code Path & Props

Up to date props can be found at the codepath above.

Example Code