# Segmented control

A row of keys in a tray with one pressed down: pick a view, a range or a mode and it applies at once. It is the kit’s selector without the lamps, with sizes, a full-width row and icon segments.

Kit part · With the Kit · https://tactileui.dev/parts/segmented

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

The tray and the key are the kit’s recess and cap, already in the selector; this part is the selector with its lamps off and three more things. A pressed key drops the height of its skirt into the tray and takes the pressed light, so the plate’s edge shades its top. Sizes change the key and the tray together, and each keeps the corners concentric. The radios are ordinary inputs, absolutely positioned and invisible, with the printed key as the span that follows each; there is no script at all.

## Variants

- Three words
- Small
- Large
- Full width
- Icons
- One unavailable
- A fieldset with a legend
- With lamps · the selector

## States

- Up
- Hover
- Pressed
- Selected
- Focus
- Disabled

## Props and options

| Name | Kind | Description |
| - | - | - |
| aria-label | attribute | Names the group. Or make the tray a and give it a , which is not drawn. |
| disabled | attribute |  |
| change | event | As any radio: fires on the one that became checked. |
| ← → · ↑ ↓ | keyboard | Move to the neighbour and choose it, wrapping at the ends; Tab enters and leaves the group as one stop. |

## Usage notes

Press a key, or Tab in and use the arrow keys: the pressed one is the choice. The readout follows.

## Accessibility

- It is a radio group, so a screen reader hears its name, “Range, 2 of 4, Week, selected”, and the arrow keys, Tab and the wrap at each end are the browser’s.
- The pressed key is shown by depth and a heavier ink, not colour; without the lamps there is no colour to lose in either finish.
- It changes something at once. A choice that needs a confirmation is a form with a key, not this.

## Related parts

- [Selector](https://tactileui.dev/parts/selector): One mode of two to five: latching keys in a tray, one down at a time, each with a lamp that lights when chosen.
- [Tabs](https://tactileui.dev/parts/tabs): Views of the same thing, switched in place: keys in a tray, the chosen view a raised cap.
- [Radio](https://tactileui.dev/parts/radio): One choice from a short list in a form: small round keys in a fieldset, the chosen one pressed with a printed dot.