Switch

On / off switch, isolated or grouped in a settings list.
In glass mode the track is a control-layer pane (brand-tinted while checked) and the knob a control-layer surface at whichever end the state puts it; the track, the label, the description and the hit target never move, and the checked state flips at once. A disabled switch is inert; solid mode keeps the skin's own knob.
Pass ref to access the interactive switch row, including its label. Use useRef<ComponentRef<typeof Switch>>(null) from React, or useRef<View>(null) with React Native's View type. Object and callback refs are supported and detach on unmount. Calling ref.current?.focus() or .blur() delegates to the host without activating the control. Browser focus is supported; native focus depends on the platform and React Native version, and is separate from accessibility focus.
On the web, Space activates the focused control on key release, and Enter also activates it. Holding Space does not repeat the change. Moving focus away, disabling the control, or composing text cancels a pending Space press.
Available to chat
iOS
Available to chat
Android
Available to chat
Web
tsx
<Switch defaultChecked>Available to chat</Switch>

Props

Prop
Description
checked
boolean
Controlled on/off state; omit for uncontrolled use.
defaultChecked
boolean
Initial state for uncontrolled use (a bare <Switch /> is interactive).
onChange
(next: boolean) => void
Fired with the next checked value when the switch is toggled (both modes). Web keyboard activation supports Space on release and Enter.
onValueChange
(next: boolean) => void
Alias of onChange, for parity with RN's value-style callbacks.
testID
string
E2E hook forwarded to the pressable row.
small
boolean
Size (pick one; default is the standard track).
large
boolean
Size (pick one; default is the standard track).
disabled
boolean
State.
children
ReactNode
Optional label, rendered to the left of the track.
description
ReactNode
Optional muted description line, rendered under the label.
accessibilityLabel
string
Accessible name for the switch when no visible `children` label is rendered (e.g. a switch embedded in an Action Panel whose label sits in sibling Text). Without it, a label-less switch announces only "switch, on/off".
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.
ref
React.Ref<View>
Ref to the interactive switch row, including its label. Typed as a React Native View. On web, React Native Web exposes its DOM host; focus() and blur() move browser focus. Native host behavior depends on the platform and React Native version. Calling focus() does not activate the control or call accessibility focus APIs.

Do & Don’t

Off

Don’t
Two-factor auth
A washed-out off track reads as disabled, so users can't tell the switch is simply off versus locked.
Do
Two-factor auth
Keep the standard input-colored off track so off stays clearly interactive and distinct from a disabled control.

On

Don’t
Permanently delete account
A switch applies instantly; wiring an on toggle to an irreversible action invites accidental, unconfirmed data loss.
Do
Auto-save drafts
Reserve the on switch for instantly reversible settings; route irreversible actions through a button plus confirmation.

Label the setting

Don’t
Notifications
Off
On
An On/Off label duplicates what the switch position already shows.
Do
Notifications
Label the setting, not the state; the switch communicates on or off.
← Swatch
Text →