Switch

<Switch name="wifi">Wi-fi</Switch>

Form fields require a name property, making it the only property needed to start using Switch. To handle its change events, add an onChange property. You can pass a label to it using the children property:

<Switch name="switch">Label</Switch>

If you're rendering Switch on the end side of the element, you can change the label position with a reversed flag:

<Switch name="switch" reversed>
  Label
</Switch>

Switch comes in small, medium and large sizes, with medium used by default.

<View gap={3}>
  <Switch name="switch" size="small">
    Open connection
  </Switch>
  <Switch name="switch">Turn on notifications</Switch>
  <Switch name="switch" size="large">
    Standby
  </Switch>
</View>

Similar to using native inputs in React, Switch can be used as a controlled or uncontrolled component. By default, Switch is uncontrolled and allows you to define its default state using the defaultChecked property. In this case, all change events are handled automatically.

<Switch name="showAvatar" defaultChecked={true} />

To manually control the state of the field, use the value property. This provides complete control over the component's value and disables automatic value handling. You must update the state using the onChange handler, allowing you to add custom logic before the update occurs.

<Switch
  name="showAvatar"
  checked
  onChange={({ value }) => {
    /* Update your state here */
  }}
/>

To make Switch non-interactive, use the disabled flag. Similar to native checkbox fields, it will prevent the onChange handler from triggering.

<Switch name="showAvatar" disabled />