# Switch

A Switch toggles the state of a single setting to on or off.

## Design & usage guidelines

The Switch is a useful component for manipulating settings with binary
(true/false, yes/no, on/off) conditions. For this reason its' label is limited
to ON/OFF.

### Disabled

A disabled switch cannot be operated by the user. If presenting a disabled "On"
switch to the user, provide a clear description for the user on how to enable
the switch to avoid creating a sense that the user has lost control of the
interface.

```tsx
import React from "react";
import { Switch } from "@jobber/components/Switch";

export function SwitchDisabledExample() {
  return (
    <Switch value={false} ariaLabel="Visible to clients" disabled={true} />
  );
}
```

### Related components

A Switch, a [Checkbox](../Checkbox/Checkbox.md), and a pair of
[RadioButton](/components/RadioGroup) can seem similar in theory, as all can
represent an `either/or decision` for the user.

Use a Switch when the user must make a decision to turn something on or off, and
a single Checkbox when a user is opting in to a choice. A pair of RadioButtons
can be used to help the user decide between two discrete options, such as "fixed
price" and "per visit" invoicing options.


## Props

### Mobile

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `accessibilityLabel` | `string` | No | — | Accessibility label for this switch |
| `defaultValue` | `boolean` | No | — | Default value of the switch when uncontrolled |
| `description` | `string` | No | — | Optional descriptive text to display under the switch |
| `disabled` | `boolean` | No | — | When true, the switch cannot be toggled |
| `label` | `string` | No | — | Optional label to display in front of the switch |
| `name` | `string` | No | — | Name of the input. |
| `onValueChange` | `(val: boolean) => void` | No | — | Callback to handle value changes |
| `value` | `boolean` | No | — | Value of the switch |