Switch

Switch

<Switch>Receive email updates</Switch>
<Switch defaultSelected>Dark mode</Switch>

Install: @helixui/core

import { Switch } from '@helixui/core'

status: stable · since: 0.1.0

Tags: toggle, on-off, setting

Live playground

Open the full editor or source on GitHub.

Anatomy

(○──)   off
(──●)   on (filled brand)

Layout

• display — inline-flex
• width — content
• height — content
• intrinsicSize — ~32×20 toggle + label
• stackable — true
• fullBleed — false

Visual

A pill-shaped track with a sliding circular knob. Off uses neutral track; on uses brand-filled track. Animates the knob with a soft transition.

Props

Name	Type	Default	Description
isSelected	boolean	false	Controlled state.
defaultSelected	boolean	false	Uncontrolled initial state.
isDisabled	boolean	false	Disables interaction.
onChange	(isSelected: boolean) => void	—	Change handler.
...rest	SwitchProps from react-aria-components	—	All forwarded.

Slots

• children — visible label text

Tokens used

color.bg.action.neutral.active, color.bg.action.brand.default, color.text.primary, color.border.focus, color.white, radius.full, space.2, shadow.sm, font.family.sans, font.size.sm

Accessibility

Role: switch

Keyboard

Key	Action
Space	Toggles the switch.
Enter	Toggles the switch.

Notes

• Use Switch for instant changes (mute audio, dark mode). Use Checkbox for opt-ins inside forms.

Composes with

Component	Relation	Note
Field	wraps	Wrap if you need separate label/description structure.
Checkbox	alternative	Checkbox for forms; Switch for instant settings.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

instant setting toggle

“switch for “Enable notifications""

<Switch isSelected={on} onChange={setOn}>Enable notifications</Switch>

Related

• Checkbox