Switch

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

Form fields have a required name property, so that's the only property you have to pass to Switch to start using it. If you need to handle its change events, add an onChange property to it.

You can pass a label to it using the children property:

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

In case 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 2 sizes, with medium used by default

<View gap={3}>
  <Switch name="switch" />
  <Switch name="switch" size="small" />
</View>

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

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

If you need to control the state of the field manually, you can use the value property. That will give you complete control of the component value and will stop handling the value automatically. You will have to update the state using the onChange handler and will be able to add custom logic before that happens.

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

To make Switch non-interactive, you can use the disabled flag. Like in native checkbox fields, it will prevent the onChange handler from triggering.

<Switch name="showAvatar" disabled />