IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Bar List

/

Design

Represent how often values of data appear against their sum in a list of percentages.

Use bar lists to compare the numerical value of items across or within categories in relation to its sum.

Behavior

Selection

The bar list allows single or multi selection when clicking or tapping on individual items. When selected, the entire item turns blue and filters data based on the selection.

View Modes

Bar lists can be viewed in the preview and expanded view modes for data cards.

Preview

In the preview view mode, the bar list should always display the first three to five items in the list. For any lists including six or more items, the first three to five items should always display and all others will remain hidden until the “View All” button is pressed to display the rest of the list.

Any selected items within the list will always display in preview mode, whether or not the list has been expanded to show all items.

Expanded

When displayed in the expanded view mode, the bar list always displays all items included in the list.

Usage

Module System

Bar lists are part of the module system, and should only be used within data cards. They should be used to filter content using multiple data set options.

Don't use bar lists outside of data cards.

Don'tuse bar lists outside of data cards.

Do use bar lists within the module system.

Douse bar lists within the module system.

Large Lists

When a data set creates a large list of items, the amount of information may potentially be overwhelming. Limit the amount of data displayed by default.

Don't display a long list of many items by default.

Don'tdisplay a long list of many items by default.

Do display 3-5 items by default with the option to view the rest.

Dodisplay 3-5 items by default with the option to view the rest.

Grouping

Use groups to divide larger lists into logical sections, like play types or special stats. Groups should always include items which are classed together and similar.

Don't separate lists into groups at random.

Don'tseparate lists into groups at random.

Do intentionally collect similar, related items from a list into a group.

Dointentionally collect similar, related items from a list into a group.

Don't give additional titles to groups to separate content.

Don'tgive additional titles to groups to separate content.

Do visibly separate the groups from one another with dividers.

Dovisibly separate the groups from one another with dividers.

Microcopy

Microcopy

List item labels should be descriptive and conscise. In many cases, these labels will consist of names of people or play types or names. In instances when longer labels occur, truncation should happen appropriately so as not to converge the label and count.

Don't use punctuation to end a line.

Don'tuse punctuation to end a line.

Do display labels letter casing as the user has entered them.

Dodisplay labels letter casing as the user has entered them.

Accessibility

By default, number and bar list visualizations use real list items (<li>) to render inside of a wrapper (<ul>). These lists are related elements and are represented as such to assistive technology, like screen readers.

Use descriptions when labels are partially hidden

Sometimes the item label may be too long to display fully. Abbreviation or truncation may remove some of the information, so we must enable descriptions to provide the full context. We can provide that extra information via ARIA attributes for screen readers and tooltips.

Don't use tooltips to provide unnecessary information or directions.

Don'tuse tooltips to provide unnecessary information or directions.

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

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

Keyboard Navigation

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 NativeIconWarning WarningsIconCritical ViolationIconWarning N/A
  • IconWarningAnimation is not disabled if user sets reduced motion preference. (AAA)
  • IconWarningText is clipped if the user sets the system to a larger font size and a bar list item is at 100%.
  • IconCriticalThe accessibilityState property needs to be used to show selection state.

Related

Number List

Data Card

Data Visualizations

Module System

Accessibility

Platform Support

The bar list is available for React and React Native.