feat(ui): add the rabtx toggle and its docs page

[shabirkhan-dev]

Summary

What changed?

Toggle (Figma 6:103), an on/off switch, with a docs page at /ui/toggle.

• A native <input type="checkbox" role="switch">, so screen readers say "on" or "off". Space toggles it and forms submit it. With children it wraps a <label>; without, it needs an aria-label. The component has no hooks, so it works in server components.
• Figma exports Toggle as flat SVGs, so the values come from them: a 28x16 track, a 12px white thumb inset 2px, off #e3e3e3, on #2d7cf6, disabled off #f2f2f2, disabled on #d3e4fd (new --rx-accent-soft token; dark derived).
• The thumb is a ::before that slides 12px on the switch spring from the beUI table (527ms, 4% overshoot), with no JavaScript, and it is off with Motion off. An invisible ::after makes the click area 24px tall.
• Track and thumb share the pill radius, so Sharp gives a square thumb in a square track and everything else stays round.
• Docs: default (on, off, disabled), controlled, usage, API, accessibility. DESIGN.md and the board card updated.

Why?

Owner: Toggle next.

Verification

• bun run format, lint (0 warnings), typecheck, naming:check, architecture:check
• 48 Playwright tests pass against the dev server (toggle 8, checkbox 7, select 6, badge 4, card 4, button 5, input 5, textarea 5, field 3, home 1): switch role, label click and Space, the 28x16 track, the exact Figma track colors, the thumb sliding 12px, the 24px target, disabled, the controlled example, the 2px focus ring, Sharp radius
• Chromium at 3x: light, dark, Sharp
• Production next build not run locally (no Google Fonts in the sandbox; next/font was stubbed for the dev check only and not committed); left to CI
• Safari and Firefox not tested (pseudo-elements on a checkbox with appearance: none)

AI-Agent Notes

• Needs a design decision (accessibility): the off track (#e3e3e3 on white) is about 1.3:1, the same low-contrast control color as the Checkbox border and the Input, Select and Textarea borders. One darker control token would fix all five. Kept as in Figma.
• role="switch" without aria-checked trips a lint rule. It is suppressed on purpose, with the reason in the code: the native checkbox already exposes its state, and aria-checked would duplicate it and can drift out of sync.
• Figma has no hover or focus state for Toggle, so none was invented; focus uses the shared 2px ring.
• Not in this PR: Radio, Task Check, Setting Row (which composes a Toggle), Solid and native versions.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
starter	Ready	Preview	Oct 8, 2026 12:04am UTC