Skip to content
DOL Studio

SegmentedControl

Design: extension Code: Code only toggletab

Live preview

Time period

4 plain segments — Day / Week / Month / Year. Active segment = white pill + slate-900 text + shadow-sm; inactive = slate-500 text.

Theme picker

3 segments with persistent selection — Light / Dark / System. Common pattern for user-settings surfaces.

View mode (with icons)

Segments with leading icons — List / Grid / Map. Icon-only segments allowed; icon+label balance for compact toolbars.

Import & files

Import
import { SegmentedControl } from "@/components/ui/SegmentedControl";
Source file
components/ui/SegmentedControl.tsx

Spec

Spec Props · Usage

Props

Prop Type Default Description
options { value, label, icon? }[] - —
value string - —
onChange (v: string) => void - —

Usage

Container uses `bg-slate-50` (NOT `bg-slate-100`) per CORE §2.1. Active segment gets `bg-white shadow-sm`.

Figma note: Playground composition pattern - not a single Figma component category. See Playground source.

Examples

Examples 1
  • 3-option selector (middle active)

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# SegmentedControl
Domain: general · Category: navigation
Design: extension · Code: code-only


## Description
Pill container with multiple labeled segments - e.g. Light/Dark toggle, view-mode switcher.


## Import
```ts
import { SegmentedControl } from "@/components/ui/SegmentedControl";
```
Source: `components/ui/SegmentedControl.tsx`


## Props (3)
| Prop | Type | Default | Description |
|---|---|---|---|
| `options` | `{ value, label, icon? }[]` | - |  |
| `value` | `string` | - |  |
| `onChange` | `(v: string) => void` | - |  |


## Usage
Container uses `bg-slate-50` (NOT `bg-slate-100`) per CORE §2.1. Active segment gets `bg-white shadow-sm`.


## Examples
- **3-option selector (middle active)**

Related

  • L
    lms

    LMS Role Sidebar

    Design only
  • Pressed

    Tabbar, Toggle

    Coded
  • S
    nav

    Sidebar

    Coded
  • S
    layout

    Scroller

    Design only
    1. 1
    2. 2
      2
    3. 3
      3

    Steps

    Coded

  • Pagination

    Coded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).