# Preset bank

Four chunky push buttons in a row, one down at a time, the way a car radio’s station presets work: press one and it plunges in and stays there, its number lit; press another and the first springs back up as the new one takes its place. A native radio group underneath, so it works with no script: Tab stops once on the bank, and the arrow keys move the choice and press a key in the same motion.

Kit part · With the Kit · https://tactileui.dev/parts/preset-bank

> 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

No lamp dot and no script.

## Variants

- A machine’s presets · numbered only
- App sections · numbered and named
- Three presets

## States

- At rest
- Hover
- Pressed
- Latched · lit
- Focus

## Props and options

| Name | Kind | Description |
| - | - | - |
| legend | element | Names the bank for a screen reader (“Sections, radio button, Home, 1 of 4”); printed off-screen. |
| checked | attribute | The latched key: sunk the full skirt, its digit lit in the amber lamp colour. |
| change | event | Native, on the radio that became checked. |
| Arrows | keyboard | Native radio behaviour: arrows move the choice and press it in the same motion. |
| presetBankHTML() | function |  |

## Usage notes

Press a button, or Tab to the bank and use the arrow keys. The chosen one stays sunk in with its number lit; the one it replaces springs back up.

## Accessibility

- Real radios underneath.
- The number is part of the key’s own name, not a decoration.
- Latched is the key’s depth and its lit digit together, never colour alone; the spring on release is the only motion, and reduced motion drops it, swapping the state at once.

## 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.
- [Side rail](https://tactileui.dev/parts/side): App navigation in a panel: the current page is a recess with its lamp lit, links grouped under printed labels.
- [Bar](https://tactileui.dev/parts/bar): The top of a page: a wordmark with a lamp, printed links, and one contrast key at most.