A dimension selector is a horizontal bar divided into two or more mutually exclusive buttons. The dimension selector allows users to choose between several different measures of content, which generally is used for chart and view switching.

Usage

• Ensure the dimensions of the selector are related to each other.
• Use a dimension selector to switch between views and charts. For example, the dimension selector can be used as a chart time range filter.
• Use the dimension selector in a chart, navigation bar, modal window, or popover.

• Do not use a dimension selector if the dimensions are not related to each other.
• Do not use a dimension selector to narrow a list. Use a filter instead.
• Do not include more than one dimension selector on the same screen.

Anatomy

A. Inactive Selector Item

In a dimension selector there is at least one inactive selector item.

B. Active Selector Item

In a dimension selector only one selector item can be active at a time. Tapping on a selected item deselects it.

Behavior and Interaction

When a button is tapped, the data corresponding to that dimension is displayed and the button remains highlighted. Each dimension allows the user to view a different set of information.

Adaptive Design

Since the wider buttons are easier to tap, the maximum number of buttons that may appear in a dimension selector is limited to improve usability. 

In compact width, we recommend using a maximum of five buttons.

In regular width, we recommend using a maximum of seven buttons.

Resources

Development: FUIDimensionSelector

Related Components/Patterns: Button Form Cell