# Swatch fan

A dropdown drawn as a paint swatch fan pinned on a rivet. The one blade it shows closed is the current choice, its tone and its printed name set once, nowhere else; a press swings the rest of the blades open from that same rivet, each stopped at its own angle, and picking one furls the fan again on the new choice. A real select carries the value and is the whole control with no script at all.

Kit part · With the Kit · https://tactileui.dev/parts/swatch-fan

> 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

The select is the single source of truth. Arrow keys, Home, End, paging and type-ahead reuse listboxMove() and typeaheadFind(), the same pure functions moves its own rows with, so the fan answers a keyboard exactly as the kit’s other lists do.

## Variants

- Opening on Sea
- No visible label (aria-label on the select)

## States

- Furled
- Open
- Chosen
- Disabled blade

## Props and options

| Name | Kind | Description |
| - | - | - |
| data-tone | attribute | Which of the kit’s five printed tones the blade carries (clay, brass, moss, sea, mist), its own lamp colours borrowed as ink, never a colour of its own. |
| change | event | Fires as any select’s does, once a blade is chosen. |
| swatchFanAngle(i, n, spread) | function |  |
| swatchFanSpread(w, h, rivet, room) | function |  |

## Usage notes

Press the rivet: the blades fan open from it. Arrow keys or a letter move the pick, Enter or a press chooses, Escape or a click outside furls it without choosing. Mist is out of stock and cannot be picked.

## Accessibility

- A real select underneath carries the value and the name: label it with a or aria-label as any select is labelled.
- Arrow keys, Home, End and type-ahead move the pick, exactly as does, the same two pure functions underneath; Enter or Space chooses, Escape furls the fan without choosing.
- A disabled blade is skipped by every key, by type-ahead and by a press; it can never become the one shown closed.
- Focus returns to the rivet when the fan furls, whether by a choice, Escape or a click outside.
- Under reduced motion the blades are never mid-swing: the mechanism only ever changes a state, it never plays a motion of its own.

## Related parts

- [Menu](https://tactileui.dev/parts/menu): A card of actions and options that slides out from under its key. The key stays down while the card is out; an option that is on lights its lamp.
- [Select](https://tactileui.dev/parts/select): A choice from a longer list, in the same recess as a field, with a printed chevron. The browser’s own menu opens it.
- [Listbox](https://tactileui.dev/parts/listbox): An always-open list let into the plate as a recess. The rows are printed on its floor and a chosen row is a cap let down into it with its lamp lit. One row may be chosen, or several; typing a few letters finds the next row that starts with them. It starts as a native select with a size, so it posts with the form and works without a script.