Kit parts

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.

On this page

Anatomy
Variants
States
Props and options
Usage notes
Accessibility
Related parts

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.

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.