Canonical inventory
Forms · core
Switch
field.switchSwitch: An input control that gathers, changes, or validates a value.
switchthe place you enter a valuethe input control
States8
Touch target44px
Evidence6
Introduced by8 kits
Visual specimen
Same contract. Every kit voice.
Translation table
What code calls it.
Web<input type=checkbox role=switch>The closest native or standardized web primitive.direct
ARIAswitchThe primary accessibility role or state pattern.direct
SwiftUIToggleThe nearest named SwiftUI API.direct
AppKitNSSwitchThe nearest named AppKit API.direct
Anatomy
Every part, named.
- 1Label
- 2Input surface
- 3Current value or placeholder
- 4Supporting or error text
- 5Focus and validation treatment
Often confused with
Similar shape. Different contract.
Checkbox
field.checkboxShares a visual family, but has a different role, state model, or interaction contract.
Radio groupfield.radio-groupShares a visual family, but has a different role, state model, or interaction contract.
Toggle buttonaction.toggle-buttonCan look similar in context, but belongs to a different semantic and behavioral family.
Prompt · paste into your agent
Ask for the exact thing.
Implement the canonical Switch component (field.switch). Switch: An input control that gathers, changes, or validates a value. Support these states: default, hover, focus-visible, active, disabled, filled, error, loading. Use semantic design tokens rather than raw visual values. Preserve a minimum 44px touch target where interactive. Provide and verify: implementation, state-matrix, responsive, keyboard, touch, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.Studio contract
What must be proven.
Required states
default · hover · focus-visible · active · disabled · filled · error · loading
Required evidence
implementation · state-matrix · responsive · keyboard · touch · reduced-motion
Source union
mavan · jade · lumen · aurora · cabana · purple-rain · spatial · margin