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.

Element: radio group
Needs: kit.css
Rules: selector.rules.md · 4
Finishes: Aluminium · Graphite · Porcelain · Black
Volumes: Tactile · Quiet

On this page

Variants
Every state, at once
API
Markup
Accessibility
How it’s built
Rules
Related parts

Every state, at once

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

Part	First chosen	Second chosen	Focus on a key
Lamps	FMAMLW	FMAMLW	FMAMLW
Plain	DayWeek	DayWeek	DayWeek

Part	First chosen	Second chosen	Focus on a key
Lamps	FMAMLW	FMAMLW	FMAMLW
Plain	DayWeek	DayWeek	DayWeek

API

Name	Kind	Values	What it does
.tui-seg	class	—	The tray. Each child label holds a hidden radio and its visible key.
.tui-seg--plain	class	—	No lamps: for view filters, ranges and finishes.
role="radiogroup" · aria-label	attribute	required	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.
display: grid	CSS	—	Stack the keys vertically when labels are long.
change	event	—	Native, on the radio that became checked.
Arrows	keyboard	—	Native radio behaviour: arrows move the choice and the focus together.

Markup

<div class="tui-seg" role="radiogroup" aria-label="Band">
  <label><input type="radio" name="band" value="fm" checked><span>FM</span></label>
  <label><input type="radio" name="band" value="am"><span>AM</span></label>
  <label><input type="radio" name="band" value="lw"><span>LW</span></label>
  <label><input type="radio" name="band" value="phono"><span>Phono</span></label>
</div>

Needs kit.css only, no script. How to install the kit.

Real radios underneath: one Tab stop for the group, arrow keys to move, announced as “Band, FM, radio, 1 of 4”.
The focus ring draws on the visible key, 2px out.
Chosen is the key’s depth and its printing weight as well as the amber lamp.

How it’s built

The tray is the kit’s recess. Each radio is kept in the DOM with opacity: 0; the adjacent span is the key, with a 5px lamp drawn as its ::before. input:checked + span moves the key down 1.5px, gives it the pressed shadow and lights the lamp in --tui-amber. No script.

Rules

selector.rules.mdIn the brain

Lamps for the modes of a machine; the plain version for view filters and finishes.

4 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.

See the Founder Pass How agents use the brain