# Rocker

A heavier on/off for power, mains and arming: a cap that pivots in a black bezel, printed | and O.

Kit part · With the Kit · https://tactileui.dev/parts/rocker

> 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

Its background is six layers: the two marks, two shadow gradients over the pressed half, a one-pixel highlight on the raised half’s top edge, and a horizontal gradient that models the pivot (end wall, lit face, falling shade, the seam, and the sunk half). Checking swaps the layers to the other side. No images and no script; the bezel is a dark gradient with an inset shadow.

## Variants

- Label left
- Label under, on a device

## States

- Off · O pressed
- On · | pressed
- Focus

## Props and options

| Name | Kind | Description |
| - | - | - |
| checked | attribute | On: the \| half is pressed. |
| data-material | attribute | What the lever and its printing are made of, apart from the page’s finish; the bezel keeps the finish. Anodised blue and green go on a whole device only. |
| change | event | Native. |
| Space | keyboard | Toggles. |

## Usage notes

Press it: the | half sinks into the bezel and the O half rises toward the lamp.

## Accessibility

- A checkbox underneath, so it is reached with Tab and toggled with Space.

## Related parts

- [Switch](https://tactileui.dev/parts/switch): On or off, applied the moment it moves. A native checkbox with a ridged thumb in a slot that lights green when on.
- [Knob](https://tactileui.dev/parts/knob): A rotary control for continuous or stepped values where space is square. Its knurl and pointer turn; its light does not.
- [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.