Use as a switch to toggle the UI outside of the component between different states.
Segmented controls can have up to 4 items.
Usage
Use segmented controls when UI context can be understood with short labels.
Don’t use them when long titles are needed to explain the content being toggled (e.g. accordions for FAQs).
Don’t use segmented controls when many options are possible (e.g. country selection).
Don’t use as a form input
Writing segmented controls
Defining your segments
Segments provide a clear title for UI configuration or content that they relate to, and ideally no more than 3-4 segments should be used. This component works best on a single horizontal line, but caters for multiple lines if more segments are provided.
Segments should be checked on a small device to ensure the labels can comfortably fit.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v4+ |
|
Web (@ovotech/element) |
❌ |
|
App (@ovotech/element-native) |
v4+ |
Related
External links