SayUI
← Library→ Turn this into a prompt
Input & controls

Segmented Control

A compact mutually exclusive button group—often for simple view modes.

Also known as segmented buttons · pill toggle group · iOS segmented

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Segmented Control".

Add a Day / Week / Month segmented control that updates the chart range immediately; implement as a radiogroup with clear selected styles and keyboard support.

Anatomy:
- segments: Equal-height options in one track.
- selected segment: Filled or elevated; only one active.

Preferred API / pattern: `shadcn ToggleGroup`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Too many segments wrapping on mobile
  • ○Avoid: Using segmented control for multi-select
  • ○Avoid: No selected state contrast

In plain wordsHow people search for it

“those connected buttons where only one stays selected”“the Day / Week / Month switcher in a compact row”“a pill group that toggles views without looking like full tabs”

AnatomyOpen for part names

segments
Equal-height options in one track.
selected segment
Filled or elevated; only one active.

How to write itOpen for stack patterns

Web (HTML/CSS)radiogroup of toggle buttons
React + Tailwind + shadcn/uishadcn ToggleGroup
SwiftUIPicker with .segmented
Ant Design<Segmented options>

Notes

Segmented controls fit 2–5 short options (Day/Week/Month). More options → select or tabs. They change mode immediately, not submit a form. Keep labels equal length when possible so the control doesn't feel lopsided.

Help me choose: Tabs vs Segmented control →

Common mistakesHumans and models trip here

  • Too many segments wrapping on mobile: switch to a select.
  • Using segmented control for multi-select: wrong pattern.
  • No selected state contrast: fail WCAG contrast on the active segment.

More failure symptoms on AI broke it.

Related patterns

TabsA row of labels that swap mutually exclusive views in the same place.Select / ComboboxA form control for choosing one (or more) options from a list.Switch / ToggleA binary on/off control that usually takes effect immediately.

Spotted a wrong name or missing pattern?

Message on X