# 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.

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

> 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 is the kit’s recess. No script.

## Variants

- With lamps · machine modes
- Plain · filters and finishes
- Stacked · long labels

## States

- First chosen
- Second chosen
- Focus on a key

## Props and options

| Name | Kind | Description |
| - | - | - |
| aria-label | attribute | Names the group, since there is no legend. |
| input[type=radio] + span | markup | The radio is visually hidden but real; the span is the key. |
| checked | attribute | The chosen key is latched below the plate and its amber lamp lights. |
| change | event | Native, on the radio that became checked. |
| Arrows | keyboard | Native radio behaviour: arrows move the choice and the focus together. |

## Usage notes

Click a band, or Tab in and use the arrow keys. One key stays down.

## Accessibility

- Real radios underneath: one Tab stop for the group, arrow keys to move, announced as “Band, FM, radio, 1 of 4”.
- Chosen is the key’s depth and its printing weight as well as the amber lamp.

## Related parts

- [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.
- [Tabs](https://tactileui.dev/parts/tabs): Views of the same thing, switched in place: keys in a tray, the chosen view a raised cap.
- [Key](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.