Switch
Turns a setting on or off, with the effect applied right away. For choices that wait for a Save button, use a Checkbox.
Installation
Set up Camaleo once (Installation), then import what you need. Wrap the switch in a Label that names the setting.
import { Switch, Label } from "@camaleo/react";Anatomy
A track with a thumb that slides to the end when it is on. Both parts have a data-slot you can target from CSS.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
Auto-reply is off.
Applies right away
Click it. A switch takes effect the moment it moves, so confirm what changed in a status line instead of a Save button.
Helps us find crashes. We never collect what you type.
With a description
Put what the setting does below the label and link it with aria-describedby, so the name stays short.
A list of settings
Related switches go in a Fieldset with a legend that reads as the start of each label.
Only your team can see your profile.
Saving to the server
Click it. When the change takes a moment, keep the switch focused with readOnly and announce "Saving…" and the result.
Dependent settings
Turn the first one off. Child settings are disabled, not hidden, so people still see what they would get back.
Available on the Business plan.
Disabled, with a reason
Say why it can't be turned on and link the reason with aria-describedby.
In context
Switches belong to settings screens. These are whole pieces of UI you can copy, in the skin you picked.
Notifications
Sent to the store app on your phone.
As soon as a customer pays.
When a product drops below 5 units.
Once a day, at 9 AM.
Labs
Try features before they ship. Changes apply right away.
Business
$32 per seat / month, billed yearly
Guidelines
Dark mode turns on as soon as it moves.
It looks done but isn't. In a form you submit, use a Checkbox.
The switch itself shows on or off; screen readers announce it from aria-checked.
"Enabled" changes on every click and never says what is enabled.
Props
defaultChecked prop instead.checked prop instead.Native attributes pass through to the track, a <span role="switch"> backed by a hidden input for forms.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the switch itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
Accessibility
- It has role="switch" and aria-checked, so screen readers say "on" or "off", not "checked".
- Clicking the label text flips it too, which gives a much bigger target than the track.
- When the effect isn't visible on screen, confirm it in a role="status" message.
- A disabled switch keeps showing on or off, so people can still read the setting.