SegmentedControl may be used to group multiple selections. The controls display the current state and related state.
Create layout to convey clear sense of information hierarchy. When a control is engaged, information below the control should also be updated.
also known as Toggle Group
When to use
When not to use
- To switch between views that represent the main content of a surface. Use Tabs instead.
- To act as a radio control within a form. Use RadioGroup instead.
Segmented Control is a naive component, meaning you need to wire any additional behavior when the user clicks on an item. If you'd like the tabs to control hiding or showing content, that state should live in a parent component.
Segmented Control can have responsive widths where the width of an item is based on its content.
Component quality checklist
Component is live in Figma, however may not be available for all platforms.
Component is available in code for web and mobile web.
Component is not currently available in code for iOS.
Component is not currently available in code for Android.