---
url: /api/css/segmented-control.md
---
# CSS: segmented-control

`.instui-segmented-control` — A single-select row of compact view or filter options.

The selected segment uses a distinct active-item shadow; it does not match an existing
\--instui-elevation-\* composite. Overflow buttons use the upstream elevation3 component tokens.

> \[!TIP]
> **JS Enhancement** — This component's CSS renders and works on its own; pair it with `@pantoken/interactions` to add the interactive behavior. See the [modifier table below](#modifiers).

## Accessibility

Use a labelled fieldset and one shared radio name with a checked default. Native radios
announce their checked state; overflow buttons need labels describing their scroll direction.

## Usage

```css
@import "@pantoken/plugin-custom-components/custom-components.css";
```

## Examples

```html
<fieldset class="instui-segmented-control" aria-label="Course view">
  <div class="viewport">
    <button class="overflow-start" aria-label="Scroll to previous views" hidden></button>
    <div class="track">
      <label class="-icon-settings"><input type="radio" name="view" checked>Settings</label>
      <label class="-icon-sliders-vertical"><input type="radio" name="view">Options</label>
      <label class="-icon-wrench"><input type="radio" name="view">Config</label>
      <label class="-icon-sliders-horizontal"><input type="radio" name="view">Utilities</label>
      <label class="-icon-monitor-cog"><input type="radio" name="view">Preferences</label>
      <label class="-icon-settings-2"><input type="radio" name="view">Feature flags</label>
    </div>
    <button class="overflow-end" aria-label="Scroll to next views" hidden></button>
  </div>
</fieldset>
```

## Structure

```text
fieldset.instui-segmented-control
  .viewport
    button.overflow-start (0..1)
    .track
      segmented-control.segment (component, 1..n)
    button.overflow-end (0..1)
```

```mermaid
flowchart TD
  n0["fieldset.instui-segmented-control"]:::cssdoc-root
  n1(".viewport"):::cssdoc-part
  n2("button.overflow-start"):::cssdoc-part
  n3(".track"):::cssdoc-part
  n4(["segmented-control.segment"]):::cssdoc-component
  n5("button.overflow-end"):::cssdoc-part
  n1 -.->|0..1| n2
  n3 -->|1..n| n4
  n1 --> n3
  n1 -.->|0..1| n5
  n0 --> n1
  click n4 "/api/css/segmented-control.segment.md"
  classDef cssdoc-root fill:#eef2ff,stroke:#6366f1,color:#1e1b4b;
  classDef cssdoc-part fill:#f8fafc,stroke:#94a3b8,color:#0f172a;
  classDef cssdoc-slot fill:#f0fdf4,stroke:#4ade80,color:#14532d;
  classDef cssdoc-component fill:#fff7ed,stroke:#fb923c,color:#7c2d12;
```

## Modifiers

| Modifier | Description |
| --- | --- |
| `.-size-lg` | Large segments. |
| `.-size-md` | Medium segments (default). |
| `.-size-sm` | Small segments. |

## Parts

| Part | Description |
| --- | --- |
| `.overflow-end` | Scroll to the following hidden segment. |
| `.overflow-start` | Scroll to the preceding hidden segment. |
| `.track` | Scrollable row containing the selectable segments. |
| `.viewport` | Clips the segment row and anchors the overflow controls. |

## Pseudo-elements

| Pseudo-element | Description |
| --- | --- |
| `::before` | — |

## States

| State | Description |
| --- | --- |
| `:disabled` | — |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--instui-border-width-sm` | `<length>` | `0.0625rem` |
| `--instui-color-background-interactive-action-primary-base` | `<color>` | `light-dark(#1D354F, #EEF4FD)` |
| `--instui-color-drop-shadow-shadow-color1` | `<color>` | `light-dark(rgba(35,68,101,0.15), rgba(0,0,0,0.3))` |
| `--instui-color-drop-shadow-shadow-color2` | `<color>` | `light-dark(rgba(35,68,101,0.1), rgba(0,0,0,0.15))` |
| `--instui-color-stroke-interactive-action-primary-base` | `<color>` | `light-dark(#1D354F, #EEF4FD)` |
| `--instui-color-text-interactive-action-primary-base` | `<color>` | `light-dark(#ffffff, #1D354F)` |
| `--instui-component-base-button-border-radius` | `<length>` | `0.75rem` |
| `--instui-component-base-button-medium-height` | `<length>` | `2.5rem` |
| `--instui-component-segmented-control-font-family` | `[ <font-family-name> \| <generic-font-family> ]#` | `Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif` |
| `--instui-component-segmented-control-font-size-lg` | `<length>` | `1.125rem` |
| `--instui-component-segmented-control-font-size-md` | `<length>` | `1rem` |
| `--instui-component-segmented-control-font-size-sm` | `<length>` | `0.875rem` |
| `--instui-component-segmented-control-font-weight` | `<integer>` | `500` |
| `--instui-component-segmented-control-height-lg` | `<length>` | `3rem` |
| `--instui-component-segmented-control-height-md` | `<length>` | `2.5rem` |
| `--instui-component-segmented-control-height-sm` | `<length>` | `2rem` |
| `--instui-component-segmented-control-item-gap-lg` | `<length>` | `0.75rem` |
| `--instui-component-segmented-control-item-gap-md` | `<length>` | `0.5rem` |
| `--instui-component-segmented-control-item-gap-sm` | `<length>` | `0.25rem` |
| `--instui-component-segmented-control-item-padding-horizontal-lg` | `<length>` | `1.25rem` |
| `--instui-component-segmented-control-item-padding-horizontal-md` | `<length>` | `1rem` |
| `--instui-component-segmented-control-item-padding-horizontal-sm` | `<length>` | `0.75rem` |
| `--instui-component-segmented-control-line-height` | `<percentage>` | `125%` |
| `--instui-component-segmented-control-track-background-color` | `<color>` | `light-dark(#44709f33, #86a8d54d)` |
| `--instui-component-segmented-control-track-background-disabled-color` | `<color>` | `light-dark(#DFE1E3, #334450)` |
| `--instui-component-segmented-control-track-border-radius` | `<length>` | `1rem` |
| `--instui-component-segmented-control-track-gap` | `<length>` | `0.125rem` |
| `--instui-component-segmented-control-track-padding` | `<length>` | `0.25rem` |
| `--instui-drop-shadow-blur-elevation3-dropshadow1` | `<length>` | `10px` |
| `--instui-drop-shadow-blur-elevation3-dropshadow2` | `<length>` | `3px` |
| `--instui-drop-shadow-spread-elevation3-dropshadow1` | `<length>` | `4px` |
| `--instui-drop-shadow-spread-elevation3-dropshadow2` | `<length>` | `0px` |
| `--instui-drop-shadow-y-elevation3-dropshadow1` | `<length>` | `6px` |
| `--instui-drop-shadow-y-elevation3-dropshadow2` | `<length>` | `2px` |
| `--instui-icon-chevron-left` | `<image>` | `url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%2018-6-6%206-6%22%2F%3E%3C%2Fsvg%3E')` |
| `--instui-icon-chevron-right` | `<image>` | `url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E')` |
| `--pantoken-segmented-end-reserve` | — | — |
| `--pantoken-segmented-font-size` | `<length>` | `1rem` |
| `--pantoken-segmented-overflow-shadow` | `<color>` | `0 2px 3px 0px light-dark(rgba(35,68,101,0.15), rgba(0,0,0,0.3)), 0 6px 10px 4px light-dark(rgba(35,68,101,0.1), rgba(0,0,0,0.15))` |
| `--pantoken-segmented-start-reserve` | — | — |

## Subcomponents

* [segmented-control.segment](/api/css/segmented-control.segment.md)