Segmented single select for filters and view modes. Does not own tab panels.
Also known as: segmented control, segment control, segmented switcher, view switcher, mode switcher
Install with the CLI, or copy the component source into your project.
Add content-switcher (npm)
1npx --yes -p @default-file/ui df-ui add content-switcher
Joined bordered segments for single-select options.
T-shirt sizes: xs, sm, and default.
Click the active item again to clear selection (value becomes empty).
Click the active item again to clear selection (current: silk).
Horizontal (default) or vertical segment layout.
Segmented single-select for filters and view modes. Supports t-shirt sizes and optional deselect. Label ink is optically centered to cap height with text-box when available, and a 1cap line box otherwise. Compose ContentSwitcher and ContentSwitcherItem.
| Prop | Type | Default | Notes |
|---|---|---|---|
| value | string | - | Controlled selected value. |
| defaultValue | string | - | Uncontrolled initial value. |
| onValueChange | (value: string) => void | - | Called when selection changes. |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout direction. |
| fullWidth | boolean | false | Stretch items to fill the available width. |
| size | "default" | "sm" | "xs" | "default" | T-shirt size for segment height and type. |
| deselectable | boolean | false | Click the active item again to clear selection (value becomes ""). |
| className | string | - | Additional styles on the root. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| value | string | - | Item value (required). |
| disabled | boolean | - | Non-interactive item. |
| children | ReactNode | - | Item label. |
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --muted | CSS color | var(--df-neutral-50) | Track fill. |
| --background | CSS color | var(--df-neutral-0) | Active item fill. |
| --foreground | CSS color | var(--df-neutral-900) | Active item label. |
| --border | CSS color | var(--df-neutral-100) | Track border. |
| --spacing-unit | CSS length | 0.25rem | Base unit for padding and gap. |
| --df-label-line-height | CSS line-height | var(--df-leading-none) | Line box for label flex centering. Defaults to --df-leading-none. When text-box is unavailable and the cap unit is supported, the kit sets this to 1cap so flex centering matches cap-height ink. |