Switch
Toggle between two states — on and off. Multiple label and description layout variants.
When To Use
- Use Switch when the user needs to enter or choose information as part of a larger form or workflow.
- Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
- Use the examples below to choose the least complex control that still communicates the user’s next step clearly.
When Not To Use
- Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
- Do not hide required context, validation, or option meaning behind placeholder text alone.
Accessibility Notes
- Keep a visible label or an equivalent accessible name attached to the control.
- Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
- Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.
Key Props / API
Composition surface
Switch keeps the native HTML or Radix API surface, then layers in design-system styling and composition defaults.
Example Code
import { Switch } from "@hilum/ui"
import { Label } from "@hilum/ui"
<div className="flex items-center gap-3">
<Switch id="lang" defaultChecked />
<Label htmlFor="lang">Language override</Label>
</div>Switch · Basic
Simple toggle
Switch with a label
Switch · Left label with description
Label and description on left
Switch anchored to right, text on left. Common for notification settings.
Get notified when someone comments on your posts.
Get notified when candidates apply for a role.
Get notified when a candidate accepts an offer.
Switch · Right label with description
Switch on left, label and description on right
Billing and preference toggles.
Save 20% compared to monthly pricing.
Receive product updates, announcements, and offers.
Add an extra layer of security to your account.
Switch · List in a settings section
Composed settings panel
Switches in a bordered card with dividers