Intro
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
Do
- 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.
Don't
- 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.
Dimension selector components
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.
Dimension selector in compact width (top), regular width (middle), and regular width full-screen (bottom)
Resources
Development: UIKit FUIDimensionSelector , SwiftUI DimensionSelector
Related Components/Patterns: Button Form Cell