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

`.instui-segmented-control` — A selectable segmented-control label and its native radio input.

A `-icon-*` class may live on the label or its native input; the interaction helper
promotes input classes to the label so the shared glyph painter can render it.

## Accessibility

Keep the native radio in the label so checked, focus, disabled, and keyboard semantics remain available.

## Usage

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

## States

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

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--instui-component-segmented-control-item-border-radius` | `<length>` | `0.75rem` |
| `--instui-component-segmented-control-selected-item-background-active-color` | `<color>` | `hsl(from light-dark(#1D354F, #EEF4FD) h s calc(l * 0.85))` |
| `--instui-component-segmented-control-selected-item-background-color` | `<color>` | `light-dark(#1D354F, #EEF4FD)` |
| `--instui-component-segmented-control-selected-item-background-disabled-color` | `<color>` | `light-dark(#C7CACD, #4A5B68)` |
| `--instui-component-segmented-control-selected-item-background-hover-color` | `<color>` | `hsl(from light-dark(#1D354F, #EEF4FD) h s calc(l + (100 - l) * 0.2))` |
| `--instui-component-segmented-control-selected-item-text-color` | `<color>` | `light-dark(#ffffff, #1D354F)` |
| `--instui-component-segmented-control-selected-item-text-disabled-color` | `<color>` | `light-dark(#F2F4F5, #273540)` |
| `--instui-component-segmented-control-unselected-item-background-active-color` | `<color>` | `hsl(from light-dark(#44709f33, #86a8d54d) h s calc(l * 0.85))` |
| `--instui-component-segmented-control-unselected-item-background-hover-color` | `<color>` | `hsl(from light-dark(#44709f33, #86a8d54d) h s calc(l + (100 - l) * 0.4))` |
| `--instui-component-segmented-control-unselected-item-text-color` | `<color>` | `light-dark(#1D354F, #ffffff)` |
| `--instui-component-segmented-control-unselected-item-text-disabled-color` | `<color>` | `light-dark(#9EA6AD, #6A7883)` |
| `--instui-focus-outline-color` | `auto \| <color>` | — |
| `--instui-focus-outline-offset` | `<length>` | — |
| `--instui-focus-outline-width` | `<line-width>` | — |
| `--pantoken-segmented-gap` | `<length>` | `0.5rem` |
| `--pantoken-segmented-height` | `<length>` | `2.5rem` |
| `--pantoken-segmented-padding` | `<length>` | `1rem` |
| `--pantoken-segmented-selected-shadow` | `<color>` | `0 2px 4px 2px light-dark(rgba(35,68,101,0.1), rgba(0,0,0,0.15)), 0 1px 2px 0 light-dark(rgba(35,68,101,0.15), rgba(0,0,0,0.3))` |