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 dimension selector contains:

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 will deselect 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, we recommend using a maximum of five buttons.

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

Specification

All buttons of the dimension selector should be equal in width. The selector items can contain text by using the control label. Showing images in selector items is not supported.

Resources

Related Component: Button Form Cell
Development: FUIDimensionSelector