Segmented Control Component

[Luizfmcosta]

Problem

Currently, our design system only offers Tabs and Dropdown Select components for switching between options. While both are useful in specific scenarios, they introduce usability challenges in cases where users need to toggle between a small set of related options efficiently:

Tabs are best suited for navigating between distinct content sections rather than quickly changing states within the same view.

Dropdown Selects work well for long lists but adds unnecessary friction for frequent interactions, requiring an extra click to reveal options.

This gap in our component library leads to a suboptimal user experience in scenarios requiring quick, inline selection.

Solution

I propose adding a Segmented Control component to Shoreline. This component provides a visually clear and efficient way for users to switch between a small set of predefined options without additional clicks or dropdown interactions.

Component Behavior:

• Displays 2–5 options in a row.
• Allows a single selection at a time.
• Provides instant feedback with a clear visual indication of the active state.

By introducing Segmented Controls, we bridge the gap between Tabs and Dropdowns, improving usability in scenarios where users need to switch between states or filters seamlessly.

Figma Example:
https://www.figma.com/design/O3BIMtUPxOrLXH1IudAVba/Segmented-Controls?node-id=1-31403&t=KlLz2D1469G5ZEg3-1

Usage examples

Here's a comparison between similar options:

🔹 Segmented Controls
✅ Best for: A small number of options (2 to 5), quick switching, and keeping options visible.
📌 Use cases: Switching between states, category filters, view modes.
⚡ Advantages: Instant feedback
⚠️ Disadvantages: Doesn’t scale well for many options.
👉 Use when: Users need to toggle between a few options quickly.

🔹 Select (Dropdown) Filter
✅ Best for: Many options, occasional use, and saving screen space.
📌 Use cases: Advanced filters, long lists of categories.
⚡ Advantages: Compact, scalable for multiple options.
⚠️ Disadvantages: Hides options and requires an extra click.
👉 Use when: There are many options, and space is limited.

🔹 Tabs
✅ Best for: Structuring independent sections within the same page or app.
📌 Use cases: Organizing content, dashboards, settings.
⚡ Advantages: Keeps navigation visible and maintains context.
🚨 Alert: Tabs should not be used to filter or change how content is presented within a single view.
👉 Use when: The content is distinct and needs clear navigation.

🔥 Quick Summary
Few options & fast switching → Segmented Control
Many options & limited space → Select (Dropdown)
Distinct content sections → Tabs

Dependencies

No response

References

https://developer.apple.com/design/human-interface-guidelines/segmented-controls
https://m3.material.io/components/segmented-buttons/overview
https://base.uber.com/6d2425e9f/p/05421e-segmented-control
https://designsystems.surf/blueprints/segmented-control -> Recommended reading

Note that some of the references use Segmented Controls as Tabs.

[davicostalf]

Tabs are best suited for navigating between distinct content sections rather than quickly changing states within the same view.

I'm not sure if I agree with this statement.

Note that some of the references use Segmented Controls as Tabs.

This is the issue that I see in including both components. I would choose either one visual or the other. Including both I think would be confusing for the user and would results in UI pattern definitions that are harder to apply.