Switch

Stable

An on-off switch with a name for screen readers. It can be disabled and can carry a hidden explanation.

Also known as toggle, toggle switch, on off

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

function Example() {
  const [on, setOn] = useState(true);
  return <Switch checked={on} onChange={setOn} label="Web search" />;
}

Your code keeps the on-or-off value and updates it when the switch is pressed.

Usage Code Design Accessibility

When to use it

Turns one setting on or off the moment it is pressed, with no save step. The knob position and the track color both show the state, so color is not the only clue.

Made of: Pressable area · Track · Knob · Hidden explanation (for screen readers)

Use it for

A setting that applies right away, like web search or memory.
A row in a settings list, with the setting's name beside it.
A setting that is locked: disable it and give the reason.

Not for

An action, like sending or deleting: use Button.
A choice between more than two options: use SegmentedControl.
An icon action that shows a pressed state: use IconButton.

Do and avoid

Do. A setting that stays on until someone turns it off.

Avoid. A switch that sends something feels like a setting, not an action.

Do

Use it for settings that apply right away, with no save step.
Show a visible label next to it and give the switch the same name.
Name the setting, not the action. Write "Web search", not "Turn on web search".
Keep the on-or-off value in your own code and pass it back as checked.

Avoid

Do not use a Switch for a choice that needs a confirm step. Use a checkbox or a form.
Do not use it for an action. Use a Button.
Do not make the on state amber. The track is dark when on.
Do not disable a switch without saying why. Give the reason in the explanation or nearby text.
Do not rely on the hidden explanation for visible help text. Only screen readers hear it, so show any help text yourself.

On a phone

On a touch screen the switch gets a hit area of at least 44px by 44px, while the track stays 20px tall.
With a visible label, tapping the label also toggles the switch.
Put the switch and its label on one row with room to spare, so two switches never sit closer than 44px.

Properties

Prop	Type	Default	Description
checkedrequired	boolean	none	Current state. The component is fully controlled.
onChangerequired	(v: boolean) => void	none	Called with the opposite of checked when the switch is activated.
labelrequired	string	none	Accessible name, applied as aria-label. When children are given, the children are the name instead and label is not used.
children	ReactNode	none	Visible label beside the switch. Pressing it flips the switch, and it becomes the accessible name.
labelPosition	"start" \| "end"	"end"	Which side of the switch the children sit on. Only matters when children are given.
disabled	boolean	none	Dims the switch, removes it from the tab order and blocks onChange.
description	string	none	Extra context announced after the name. Rendered as screen reader text and linked with aria-describedby.
id	string	none	Id on the button, for a visible label that uses htmlFor.
className	string	none	Classes for the button. The hit area is the button, so margins and alignment apply to it.

"Show code under the preview gives the code for the example on the stage."

In Figma

In Figma, one Switch switches all of this from its properties panel, across 10 variants. Each property sets the React prop beside it, so design and code use the same names.

Switch in Figma: each property and the React prop it sets
Figma property	React	Values
Checked	`checked`	On or off
State	Hover, Pressed and Focus come from the browser. Disabled sets `disabled`.	Default, Hover, Pressed, Focus, Disabled

Tokens

Change one of these and every part that uses it follows.

--accent
--border-strong
--dur-fast
--focus-ring

Controlled switch

When to use it

Use it for

Not for

Do and avoid

Do

Avoid

On a phone

Works with

Properties

In Figma

Tokens

Built in

What you need to do

Build your next AI screen with Tattva.