Content
- Ideal: 10 characters / acceptable: 15 characters per option
- Clear, concise, transparent copy that works together: Day, Month, Week / Basic, Essentials, Plus, All-in-One
- 1 word per section is the usual, 2 is ok but not advised, avoid 3+ (exception: “All-in-One”)
- No text wrapping, ever
Placement
Always place ABOVE the content it’s filtering, never below.
Fill vs fixed width
- Fill: use when it makes sense to go edge to edge. This is the native app default.
- Fixed: can be used in tight spaces, typically when it’s paired with other controls. This is the desktop default.
Best practices
Number of options
Use in single-select scenarios when there are 2 to 4 options for filtering. For 5 or more options, use a single select component.
Filtering vs navigation
Use a segmented control for filtering, not for performing actions or navigation. For navigation, use tabs instead.
Resources
(internal only)
Related components
|
Checkbox (group) |
Checkbox (single) |
Segmented control |
||
---|---|---|---|---|---|
Number of options |
Multiple |
Multiple |
2 (on/off) |
2 (on/off) |
2-4 |
Number of selections |
1 |
0 - all |
1 |
1 |
1 |
Default selection |
Yes (usually) |
No |
Yes |
Yes |
Yes |
Relationship of options |
Mutually exclusive |
Independent |
Mutually exclusive |
Mutually exclusive |
Mutually exclusive |
Selection occurs |
After confirmation |
After confirmation |
After confirmation |
Immediately |
Immediately |