# 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](../RadioGroup/RadioGroup.md) 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

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `ariaLabel` | `string` | No | — |  |
| `disabled` | `boolean` | No | — |  |
| `name` | `string` | No | — | Adds a name for the hidden input and an ID so a label can be used to describe the switch instead of an aria-label. Th... |
| `onChange` | `(newValue: boolean) => void` | No | — |  |
| `value` | `boolean` | No | — |  |