# Lever frame

A single choice drawn as a miniature lever frame. Each option is a short steel lever in one low cast bed, with its label on a plate; the chosen lever is pulled toward you, its plate is the bright one, and a pin across each foot shows the lock.

Kit part · With the Kit · https://tactileui.dev/parts/lever-frame

> 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 script reads the buttons in the frame once and wraps them in one cast bed seen front on from a little above. Each cell is its own eye, straight in front of its own lever, so a pulled lever is one rotation about its foot: it gets shorter, its knob drops, its foot slides forward along the slot toward the front edge and it goes darker. A short steel pin across the slot in front of each foot is in the way when its lever is held and withdrawn into the bed when the lever is free. Each label sits on its own plate on the front face, and the chosen plate is the bright one. The pure leverFrameMoves() decides the order between two choices: the lever that was over returns upright, the locking bar shifts in its slot and the pins change, then the chosen lever is pulled with a small settle. A pointer drag follows the same angle and commits past half of the travel; a short fall animates a lever back to the state it held. When the row does not fit its container the levers wrap into two beds of three, one group still, and both interlocks shift together. After a change the hidden field and the polite status region are written, and change fires with the value. The plates take the whole column, so they match in a row, and the widest label sets the column, so no label runs over its plate. The styles are token-only, mixed from the finish's neutral and object tones and the volume's depth tokens.

## Variants

- Who can see this
- Shipping speed
- Five options with one pinned
- Six options

## States

- Rest
- Pulled
- Mid pull
- Pinned

## Props and options

| Name | Kind | Description |
| - | - | - |
| data-lever-frame | attribute | Marks the frame for the script, which builds the bed, the short levers, the plates, the pins and the interlock and wires the group. Without it the buttons are inert. |
| data-name | attribute | Names the hidden field the value is carried in, so a form posts it as usual. |
| data-value | attribute | The value written to the hidden field when that lever is chosen. |
| leverFrameMoves(from, to, angle) | function | Pure: the moves between two choices, the one on its way back first and the other after it. The same choice, or none, is no move. |
| change | event | Bubbles, with detail.value: the new value, the same one the field now holds. |

## Usage notes

Press a lever or its plate, or use the arrow keys, Home and End. Drag a lever past half way and it commits. A pinned option cannot be chosen. Drop it in a form field where the label is the usual one above it.

## Accessibility

- A real radiogroup.
- One tab stop for the whole frame. Arrows wrap through the usable levers, Home and End go to the ends, and each of those moves the choice. Space and Enter choose the lever that has focus.
- A hidden field carries the value and fires change, so a form posts the choice as it would any other field. A polite status region says the new choice once, without repeating the plates.
- A pinned lever is skipped by the arrows, Home, End, Space, Enter and the pointer. Its pin in the way across the foot is the second signal beside aria-disabled.
- Under reduced motion the state changes at once: no swing, no settle, and no bar shift.
- A row that does not fit wraps into two beds of three, one group still, and the locking moves across both rows.

## 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.
- [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.
- [Preset bank](https://tactileui.dev/parts/preset-bank): Four chunky push buttons in a row, one down at a time, the way a car radio’s station presets work: press one and it plunges in and stays there, its number lit; press another and the first springs back up as the new one takes its place. A native radio group underneath, so it works with no script: Tab stops once on the bank, and the arrow keys move the choice and press a key in the same motion.