Skip to the page
Tactile UI

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

On this page
  1. Anatomy
  2. Variants
  3. States
  4. Props and options
  5. Usage notes
  6. Accessibility
  7. Related parts

Seats open in 11 days. Want one email that morning?

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

NameKindDescription
aria-labelattributeNames the group, since there is no legend.
input[type=radio] + spanmarkupThe radio is visually hidden but real; the span is the key.
checkedattributeThe chosen key is latched below the plate and its amber lamp lights.
changeeventNative, on the radio that became checked.
ArrowskeyboardNative 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.

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

Views of the same thing, switched in place: keys in a tray, the chosen view a raised cap.

Key

Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.