Toggles switch a single setting on or off with immediate effect, built on React Aria’s Switch, with an optional label and hint beside the track.
Toggles switch a single setting on or off with immediate effect, built on React Aria’s Switch, with an optional label and hint beside the track.
Change the props and copy the result. The component select switches between the full Toggle field and the bare ToggleBase; every control is a real prop, including ToggleBase’s state props.
ToggleBase is visual only
Switch around it; details are on the Code tab.Two components from one module: the field most screens use, and the bare visual switch it is built around.
| Component | Description | Import from |
|---|---|---|
| Toggle | The full switch field: the visual track with an optional label and hint, built on React Aria’s Switch. | @/components/base/toggle/toggle |
| ToggleBase | The bare visual switch. Renders two divs and nothing interactive; compose it inside your own Switch. | @/components/base/toggle/toggle |
Two types at two sizes, off and on: 8 bare variants above, then the same 4 type and size pairs again below with a label and with a label and hint, 8 more. All live. The slim track is 4px shorter than the default at the same size and its thumb sits flush, wearing a border. Tracks measure 36×20 and 44×24 (default), 32×16 and 40×20 (slim), matching the Figma sheet exactly.
The whole row toggles
Every treatment below is painted by the kit itself: ToggleBase takes its states as plain props, so nothing here is a hand-copied approximation. Both types, at md.
Hover leaves the off state alone