Switch

A setting that is on or off, and takes effect the moment it is flipped.

<Switch>
  <Switch.Track>
    <Switch.Thumb />
  </Switch.Track>
  <Switch.Label />
</Switch>

• Switch — the root, and it is the row, not the track. It is the pressable: it owns the state, resolves the recipe once (R5) and publishes it to its slots.
• Switch.Track — the bar the knob slides on, and the surface that says on or off.
• Switch.Thumb — the knob. The only thing on this component that moves.
• Switch.Label — what the setting is.

The root is the row so that tapping the label flips the switch — the Checkbox's shape, for the Checkbox's reason.

R3 — and the track comes with the auto-wrap:

<Switch>Mode sombre</Switch>
// is exactly
<Switch>
  <Switch.Track>
    <Switch.Thumb />
  </Switch.Track>
  <Switch.Label>Mode sombre</Switch.Label>
</Switch>

With no children at all it is the track alone — the form a settings list wants, where the label is the row's own text.

Controlled, or not

<Switch isSelected={isOn} onSelectedChange={setIsOn}>
  Mode sombre
</Switch>

<Switch defaultSelected onSelectedChange={save}>
  Synchroniser en Wi-Fi seulement
</Switch>

onPress still fires, composed with the flip.

The two shapes

<Switch variant="primary">Le pouce à l'intérieur</Switch>
<Switch variant="secondary">Le pouce par-dessus</Switch>

variant is a geometry axis on this component, which is unusual and deliberate — both shapes are the accent when they are on, and what changes is where the knob sits:

• primary (the default) rides the thumb inside the track, clear of its edges by the track's own inset. The shape everything else in this library shares: a filled surface with something on it.
• secondary makes the track a thin bar and stands the thumb over it, overhanging above and below. Less ink, and the knob reads as the thing you drag.

They are the legacy component's inside and overlap, under the library's own two names — the same two shapes, the same measurements, and one vocabulary across the whole v1 API instead of a third pair of words for this component alone.

A glyph on the knob

<Switch.Track>
  <Switch.Thumb>
    <Icon as={CheckIcon} size={12} color={theme.colors.accent} />
  </Switch.Thumb>
</Switch.Track>

The knob's children travel with it. Anything else you put in the track stays where you put it — a glyph at each end, for instance, which is what the reference implementation's StartContent and EndContent are; here they are two Views you position, because the track is a node you were given rather than one that was hidden from you.

Disabled

<Switch isDisabled defaultSelected>
  Géré par votre organisation
</Switch>

On the row, not the track: what is disabled is the control, and the label is part of it.

As another element

<Switch asChild isSelected={isOn} onSelectedChange={setIsOn}>
  <Animated.View layout={LinearTransition}>…</Animated.View>
</Switch>

R12 — the caller's element is the row, so it takes the children it was written with and the auto-wrap does not apply.

Sizes

primary — the knob inside the track:

secondary — the knob over the bar:

md is the legacy switch measured — a 48 × 28 track with a 22 knob — and the reference implementation's is the same 48 wide.

The width is part of the control, unlike everywhere else in the library, where size never touches it: a switch is a fixed shape, and a track that stretched with its parent would be a progress bar.

The travel is not a number anyone writes: it is width − knob − 2 × inset, arithmetic the root does on the flattened style, because a slide happens in a worklet and a worklet needs a number rather than a style to flatten every frame.

radius is the track's corner, full by default. The knob stays round — a squared track with a round knob is a real design; the reverse is not.

Colour

<Switch color="#7c3aed">Teinté</Switch>

A raw tint (R7), and here it is the colour the switch turns on to, with a knob derived to read against it. The track at rest keeps its neutral: a switch that is off is off in every brand.

It reaches there through the bgSelected / fgSelected roles, which the tint pass repaints — the same mechanism as the Checkbox's, written up once in checkbox.md.

The knob at rest is the theme's white, one of the two places in the library where a primitive is named on purpose: a switch's knob is white in both modes, the way the platform's own is, because it has to read against the neutral track and against the accent one.

• accessibilityRole="switch" on the root, overridable, with accessibilityState.checked following the value and .disabled following isDisabled. A caller's own accessibilityState is merged, not spread over.
• The label is inside the control, so the switch announces itself with its text. A switch with no label needs an accessibilityLabel.
• The whole row is the touch target.
• The label does not change with the state. "Mode sombre" is the setting whether it is on or off; a label reading "Activé" would say what the track and the role already say, twice.