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

Kit part · With the Kit · https://tactileui.dev/parts/cloth-selector

> 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

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

- [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.
- [Segmented control](https://tactileui.dev/parts/segmented): 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](https://tactileui.dev/parts/radio): One choice from a short list in a form: small round keys in a fieldset, the chosen one pressed with a printed dot.