The segmented bar allows single or multi selection when clicking or tapping on individual bar segments. When selected, the bar segment and text turn blue and the percentage value is replaced with a check mark.

Segmented bars can be viewed in the collapsed and preview view modes for data cards.

When displayed in the collapsed view mode, the segmented bar omits labels and percentages and acts as a mini-preview.

• Mobile: When tapping the mini-segmented bar, the view mode should switch to preview in order to make selection easier for the user. The selected segment within the bar should be selected and displayed before switching to preview mode.
• Web: When hovering or focusing on a bar segment, tooltips are displayed which include the label value of that segment. On click, the bar segment should be selected.

In the preview view mode, the full segmented bar is always displayed.

Segmented bars are part of the module system, and should only be used within data cards. Segmented bars should be used to filter content using multiple data set options. Segmented bars should be used to filter content between two and four data sets which are meant to be viewed separately.

Don'tuse segmented bars outside of data cards.

Douse segmented bars within the module system.

Don'tdisplay a long, complex set of data in segmented bars.

Dochoose segmented bars to display smaller, and more common, data sets.

Don'tindicate empty data segments can be filtered.

Dodisplay no data segments alongside others.

The labels on each bar segment should be as short as possible without becoming arbitrary or difficult to understand. Ideally, bar segment labels should be between one and five characters. Longer labels are acceptable as long as there are a limited number of bar segments that allow the characters to be read without running into adjacent bars.

Don'tuse verbose labels in bar segments.

Dowrite concise, logical labels in bar segments.

Sometimes the button label alone isn't enough to properly convey the meaning intended. For example, a segmented bar for “Ball Carriers” might have labels that include the players' numbers, but omit the name for space. By adding their full names as descriptions, we can provide that extra information via ARIA attributes for screen readers and tooltips for all other users.

Don'tuse tooltips to provide unnecessary information or directions.

Douse tooltips to display a concise description when labels could be misunderstood.

Don'tomit tooltips in collapsed view mode.

Doinclude the clip count in parenthesis after the description or label in the tooltip.

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

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

Data Card

Card Group

Data Visualizations

Module System

Accessibility

The segmented bar is available for React and React Native.