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 parts
Cloth selector
A mode switch made of cloth. A row of tiles covered in stretched fabric stands in a machined tray, each with an icon and a word pressed into it. The chosen tile sits a touch lower and a lamp behind it lights its icon and word through the weave. Choose another and the first lamp fades down as the next comes up. Underneath it is a group of native radios, so it posts one value without any script.
Seats open in 11 days. Want one email that morning?
Anatomy
Unlit, the icon and word are pressed in: a darker shade of the cloth on aluminium and a paler one on graphite, with a shaded upper wall and a lit lower lip. Corners are concentric. An aurora lamp is the kit’s shared field in the glow: three to five soft blobs, each a radial gradient on its own layer, drifting on the compositor, shaped by the glow’s own falloff. On graphite it is added as light. The icon and word are lit near white, tinted by the field’s white point.
Variants
- Four modes · filament, twill
- Speaker cloth
- Green lamp
- Amber lamp
- Red lamp
- Blue lamp
- White lamp
- Your own lamp · one hex
- Aurora · borealis
- Aurora · prism, speaker cloth
- Aurora · your own colours
- Aurora · with a Pause key
- Two modes
- Six modes
- Compact · the word is a tooltip
- A mode that cannot be chosen
States
- Chosen · not
- Hover
- Focus
- Disabled
Props and options
| Name | Kind | Description |
|---|---|---|
| data-lamp | attribute | The lamp behind the cloth. Filament, a warm white, by default. |
| paused | attribute | Holds the aurora where it is. Toggle it from a Pause key of your own, a real button with aria-pressed (the recipe is under Markup): an aurora drifts for longer than five seconds, so a way to stop it is part of using one. No key is built in. |
| data-weave | attribute | The cloth. A fine diagonal twill by default, felt more than seen; speaker cloth is a coarser weave that shows the light as pinholes. |
| Home · End | keyboard | The first or last mode that can be chosen. Needs kit.mjs; the arrow keys are the browser’s own. |
| clothSelectorHTML · clothLamp · clothWeave · clothSelectorEdge | function | The markup, written for you, and the rules under it, pure: which lamp a value means, which weave, and where Home and End go. |
Usage notes
Click a tile, or tab in and use the arrow keys, Home and End. The lamp fades from one tile to the next. Try the other lamps and the speaker cloth, then Save.
Accessibility
- Only the chosen radio is in the tab order, the arrow keys move and choose, a form posts one value and nothing needs a script.
- Each radio is named by its word, which is real text in the label. The icon and the two lit copies of the word are hidden from assistive technology, so the word is read once.
- Chosen is said three ways: the radio is checked, the tile sits lower, and it is lit. The light is never the only sign.
- Unlit words are more than 5:1 against the cloth in aluminium and graphite; the lit word has a shade under it so it reads over its own light.
- The selector does not draw one itself.
- With reduced motion the light moves from one tile to the next at once, with no fade, and the tile drops without easing. An aurora is then one still frame.
Related parts
Segmented control
A row of keys in a tray with one pressed down: pick a view, a range or a mode and it applies at once. It is the kit’s selector without the lamps, with sizes, a full-width row and icon segments.
Radio
One choice from a short list in a form: small round keys in a fieldset, the chosen one pressed with a printed dot.