Switch

Usage notes

Use <Switch> with Switch.Control and Switch.Thumb. Do not add Switch.HiddenInput in normal usage; the styled root renders Ark's hidden input internally so pointer interaction and native form integration keep working.

When placing a Switch inside a clickable row such as NavigationList.Item, do not nest it inside a button. Render the row with as="div", keep the row click handler for blank-space activation, and stop propagation around the Switch so a direct Switch click does not toggle twice.

Toggle switch with on/off states, label, and form integration.

API Reference

<Switch> extends SwitchProps
All props inherited from SwitchProps.
<Switch.Control> extends SwitchControlProps
All props inherited from SwitchControlProps.
<Switch.Label> extends SwitchLabelProps
All props inherited from SwitchLabelProps.
<Switch.Thumb> extends SwitchThumbProps
All props inherited from SwitchThumbProps.