Toggles — DrumKit

Demo

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.

Remember me

Save my login details.

Component

size

slim

defaultSelected

isDisabled

label

hint

import { Toggle } from "@/components/base/toggle/toggle"; <Toggle size="md" label="Remember me" hint="Save my login details." />

ToggleBase is visual only

The base component renders two divs and nothing interactive, which is why its states are plain props you can set here. Composing it into a custom row means supplying your own React Aria Switch around it; details are on the Code tab.

The family

Two components from one module: the field most screens use, and the bare visual switch it is built around.

The components in this family, with their descriptions and import paths
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`

The variant space

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.

States

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.

default

rest

rest, on

hover, on

focus-visible

focus-visible, on

disabled

disabled, on