IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Toggle

/

Design

Enable users to filter to a single data set within a group.

Use toggles to enable selecting a data set from a group. It will apply appropriate filters to the viewable content the user is working with.

Behavior

Selection

Toggles are meant to be used as radio selectors, meaning that a single option can be selected at a time. If one of the toggle buttons is selected the others will become unselected.

View Modes

Toggles can be viewed in the collapsed and preview view modes for view mode for data cards.

Collapsed

When displayed in the collapsed view mode, the toggle displays a set of toggle buttons that can be selected and de-selected.

Preview

In the preview view mode, related toggles can be displayed in a list with left-aligned labels.

Usage

Toggles are part of the module system, and should only be used within data cards. Toggles should be used to filter content between two and five data sets which are meant to be viewed separately.

Don't use toggles outside of data cards.

Don'tuse toggles outside of data cards.

Do use toggles within the module system.

Douse toggles within the module system.

Don't use toggles in varying orientations.

Don'tuse toggles in varying orientations.

Do use toggles horizontally.

Douse toggles horizontally.

Don't use toggles in preview, expanded, or full view states.

Don'tuse toggles in preview, expanded, or full view states.

Do use toggles in collapsed view state.

Douse toggles in collapsed view state.

Don't use toggles for extensive data sets.

Don'tuse toggles for extensive data sets.

Do use toggles for two to five options.

Douse toggles for two to five options.

Don't enable selecting multiple toggle buttons at once.

Don'tenable selecting multiple toggle buttons at once.

Do disable toggle buttons with no data.

Dodisable toggle buttons with no data.

Don't use toggle lists to group toggles that are not directly related.

Don'tuse toggle lists to group toggles that are not directly related.

Do use toggle lists to quickly filter related values.

Douse toggle lists to quickly filter related values.

Microcopy

Labels

Toggle button labels should be as short as possible without becoming arbitrary or difficult to understand. Ideally, these labels should only be a single character, but if necessary to convey meaning, two characters are acceptable.

Don't use verbose labels in toggle buttons.

Don'tuse verbose labels in toggle buttons.

Do use only one or two characters in toggle buttons.

Douse only one or two characters in toggle buttons.

Accessibility

Use descriptions when the label isn't enough (web)

Sometimes the button label alone isn't enough to properly convey the meaning intended. For example, the ODK toggle might immediately make sense to some coaches or players, but for others it could be confusing. By adding descriptions such as “offense”, “defense”, and “special teams” we can provide that extra information via aria attributes for screen readers and tooltips.

Keyboard support (web)

Tab navigation is fully supported by default. Users can press enter to toggle the selection of an item.

Audit Results

See our full accessibility audit for more information about these results.

PlatformVisualInteractiveAutomatedDetails
ReactIconConfirmation PassIconConfirmation PassIconConfirmation Pass
React NativeIconConfirmation PassIconCritical ViolationsIconWarning N/A
  • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
  • IconCriticalThe accessibilityState property needs to be used to show selection state.

Related

Data Card

Card Group

Data Visualizations

Module System

Accessibility

Platform Support

The toggle is available for React and React Native.