Switch input

Usage notes

Use <Switch> with Switch.Control and Switch.Thumb. The styled root renders Ark's hidden input internally, so pointer interaction and native form integration keep working without any extra part.

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>

Prop	Type	Default
class	—	required
children	Snippet	required
onValueChange	—	required
onValueSubmit	—	required

<Switch.Control>

Prop	Type	Default
class	—	required
children	Snippet	required

<Switch.Label>

Prop	Type	Default
class	—	required
children	Snippet	required

<Switch.Thumb> extends SwitchThumbProps

All props inherited from SwitchThumbProps.

Switch input

Usage notes

API Reference

Feedback for components-switch

About ploss