Segmented
No library Beginner
An iOS-style segmented control with two labelled options. A frosted-glass pill slides underneath the active segment — fundamentally different from a circular-thumb toggle. No dependencies.
An iOS-style segmented control with two labelled options. A frosted-glass pill slides underneath the active segment — fundamentally different from a circular-thumb toggle. No dependencies.
Goal: Create a "Segmented" toggle — an iOS-style two-segment control.
Visual behavior: Two labelled buttons ("Off" / "On") side by side inside a rounded container (bg: rgba white/7%, 10px radius, 3px padding). An absolutely-positioned frosted-glass indicator pill slides under the active segment with a slight spring overshoot (cubic-bezier(0.34, 1.2, 0.64, 1), 280ms). Active label: white, 600 weight. Inactive: white/40%, 400 weight.
Technique: position: relative on wrapper. The indicator span has position: absolute, transitions left between 3px (Off) and 50% (On). Each segment is a plain button (z-index 1, transparent bg). React useState tracks active segment.
Accessibility: role="group" on wrapper. Active state communicated via visual weight/colour. Slide transition removed under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.