# Toggle switch set > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A preferences card for a fictional smart-home app, Nook, where each of six rows uses a different toggle switch style: classic pill, Material-style icon thumb, day/night scene switch, squish-on-press, labelled ON/OFF, and a three-way segmented control. To the left, a 128px display headline ("Tune your home.") sits over a mono index that reads back every switch's live value. The feeling is warm, tactile and a little cheeky: peach paper, tomato accent, springy thumbs. The detail worth copying is that every switch is a real `role="switch"` button whose look is driven entirely by `aria-checked`, so state, styling and accessibility can never drift apart. ## Reference behaviour 1. Initial state: Away mode ON, Doorbell alerts ON, Evening scene NIGHT, Child lock OFF, Eco heating ON, Hallway motion AUTO. The index on the left mirrors these six values; ON-ish values are tomato, OFF/DAY are muted. 2. Click (or Space/Enter on) any switch: `aria-checked` flips, the switch animates to its new state, the matching index row updates its value, and the card footer reads "Saved HH:MM · " with the text flashing tomato for 900ms. 3. **01 Classic** (52×32): white 28px thumb slides 20px with a slight overshoot; track fills tomato. 4. **02 Icon thumb** (52×32, 2px outline): a 24px thumb shows an × when off (taupe thumb on outlined track) and a check when on (white thumb on a tomato track). Icons cross-fade with a 45° counter-rotation. While pressed, a 8px tomato halo (16% alpha) rings the thumb. 5. **03 Day / night** (76×36): day is a sky gradient with a cloud and a sun thumb with two soft halo rings; night cross-fades to a navy sky with four star dots while the thumb springs 40px right, turns bone and reveals three craters. The cloud sinks 20px and fades. 6. **04 Squish** (58×32): pressing stretches the thumb 10px toward its destination; releasing springs it across. Track goes ink when on. 7. **05 Labelled** (84×34, 9px radius, 1.5px ink border): off shows a dark 38×25 thumb on the left and "OFF" on the right; on fills the track tomato, the thumb turns white and slides 38px right, and "ON" appears on the left in white. 8. **06 Segmented** (Off / Auto / On, 3×64px): a white pill slides under the chosen option with an overshoot spring; choosing On turns the pill tomato with white text. 9. Hovering a card row highlights the corresponding index row (text goes from `--ink-2` to `--ink`). ## Structure ``` 1280 × 800, body padding 56 / 64, grid: 1fr | 620px, gap 56 ┌───────────────────────────────────┬──────────────────────────────────────┐ │ ● NOOK · 14 ELMSTEAD ROAD │ ┌──────────────────────────────────┐ │ │ │ │ Preferences Ground floor… │ │ 64 │ Tune │ ├──────────────────────────────────┤ │ │ your (128px / .86) │ │ [ic] Away mode 01 CLASSIC (●=) │ │ 78 │ home. ← tomato │ │ [ic] Doorbell 02 ICON (=✓) │ │ │ │ │ [ic] Evening 03 DAY/NIGHT (☾ ) │ │ │ lede, 400px max │ │ [ic] Child lock 04 SQUISH (● ) │ │ │ ────────────────────────── │ │ [ic] Eco heat. 05 LABELLED [ON] │ │ │ 01 Classic ON │ │ [ic] Hallway 06 SEGMENTED [|A|]│ │ │ … six rows, 1px hairlines │ ├──────────────────────────────────┤ │ │ 06 Segmented AUTO │ │ ● All changes saved · 21:13 │ │ └───────────────────────────────────┴─└──────────────────────────────────┘─┘ ``` - `
`: eyebrow `div`, `

` with `` around "home.", `

`, `

    ` of six `
  1. ` each containing number, name and an ``. - `
    `: header (`

    ` + mono meta), six `.row`s, footer with ``. - Each `.row`: 44px icon tile, `.txt` (title `` with a mono style tag ``, description `

    `), then the control. - Switches 01–05: `