Switch

Switch

Component preview

An on or off control for a setting whose change takes effect immediately.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: toggle switch, on-off switch, settings toggle

turn dark mode on or off
a sliding setting that applies now
enable notifications immediately
an on off control in settings
switch this feature without saving
a toggle that changes state right away

Try it

Choices and binary states

Compare all three behaviors

Shared comparison scenario: A settings flow asks the user to make a choice and understand whether it is independent, exclusive, or applied immediately.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Switch

Switch applies one setting immediately; Checkbox usually records a choice for later submission, and Radio group chooses one value among alternatives.

Your task

Toggle the setting with pointer and Space and observe the preview update without saving.

Edge case to verify

If persistence fails, the switch returns to its prior state and an inline status explains the failure.

Mission

Toggle the setting with pointer and Space and observe the preview update without saving.

Primary state: The labeled switch exposes its current on or off state and updates the preview immediately.

Autosave

Applies every change as you type.

Preview: Off

Mobile sync, managed by the team

Parts of the specimen

Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.

Label

The persistent text that names a control or field.

Use it when

Turning an account setting on or off
Enabling a feature with immediate feedback

Avoid it when

The value is submitted with the rest of a form
The choice is one of three or more mutually exclusive values

Compare similar concepts

Checkbox represents an independent choice that may wait for submission; Radio group enforces one choice, while Switch applies an on or off setting immediately.

Checkbox

Radio group permits exactly one choice; Checkbox choices are independent, while Switch changes one immediate on or off setting.

Radio group

Technical details

Behaviors

Apply immediately
Changing the on or off state takes effect immediately and does not wait for form submission.
Toggle on activation
Activating the trigger opens the surface, and activating it again can close it.

States

Setting off
Setting off
Setting on
Setting on

State transitions

Setting off → Setting on
Pointer, touch, or Space turns the setting on and applies it immediately.
Setting on → Setting off
Pointer, touch, or Space turns the setting off and applies it immediately.

Test scenarios

Context: Appearance settings include an immediate Reduce motion preference.
Mission: Toggle the setting with pointer and Space and observe the preview update without saving.
Primary state: The labeled switch exposes its current on or off state and updates the preview immediately.
Edge case: If persistence fails, the switch returns to its prior state and an inline status explains the failure.

Accessibility

Role: switch
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: The switch is one visible focus stop and its label activates the same control.
Dismissal: Not applicable: the setting persists until toggled again; a failed update restores the prior state.
Scroll: Scrolling the page does not change the value. The focused control and any associated message remain visible above fixed interface regions.
Announcement: The stable accessible name and current on or off state are announced after every change.
Keyboard: Tab focuses the switch
Space toggles on and off

Bindings

Switch.Root
implementationKind
radix
nativeElement
Not applicable
ariaPattern
switch
radixPrimitive
Switch
shadcnRecipe
Switch
runtimeDependency
@radix-ui/react-switch@1.3.3
packageName
@radix-ui/react-switch
exportName
Switch.Root
exactVersion
1.3.3
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: Radix Switch exposes on and off state, but the setting must take effect immediately and still needs a visible label.
Verify binding source

Sources

WAI-ARIA APG: Switch Pattern
W3C WAI · standard · 2026-07-16
Claim covered: Switch: switch role, stable label, binary state, and keyboard interaction guidance.
Radix Primitives: Switch
Radix Primitives · documentation · 2026-07-16
Claim covered: Switch: documented Radix Switch parts, checked state, labeling integration, and keyboard behavior.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.