# Switch

**📖 Live documentation:** https://cds.coinbase.com/components/inputs/Switch/

A control for toggling between on and off.

## Import

```tsx
import { Switch } from '@coinbase/cds-web/controls/Switch'
```

## Examples

```jsx live
function SwitchDemo() {
  const [checked, setChecked] = useState(false);

  return (
    <Switch onChange={() => setChecked((s) => !s)} checked={checked}>
      Dark Mode
    </Switch>
  );
}
```

### Customizing Colors

Like other control components (i.e. Radio, Checkbox), you can customize the color of the Switch by setting the `controlColor` prop.

```jsx live
function SwitchDemo() {
  const [checked, setChecked] = useState(false);

  return (
    <Switch controlColor="accentBoldGreen" onChange={() => setChecked((s) => !s)} checked={checked}>
      Custom control color
    </Switch>
  );
}
```

For more advanced color customization, you can use additional style props like `background`, `borderColor`, `borderWidth`, and `color`:

```jsx live
function AdvancedSwitchDemo() {
  const [checked, setChecked] = useState(false);

  return (
    <Switch
      background={checked ? 'accentBoldPurple' : 'bgNegative'}
      borderColor={checked ? 'bgPositive' : 'bgPrimary'}
      borderWidth={200}
      checked={checked}
      color="bgPrimary"
      controlColor="bgPositive"
      onChange={() => setChecked((s) => !s)}
    >
      Advanced styling
    </Switch>
  );
}
```

### Elevation

You can add a drop shadow to the Switch thumb using the `elevation` prop. By default, the Switch has no elevation.

```jsx live
function ElevationSwitchDemo() {
  const [checked, setChecked] = useState(false);

  return (
    <Switch elevation={1} onChange={() => setChecked((s) => !s)} checked={checked}>
      With drop shadow
    </Switch>
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `accessibilityLabel` | `string` | No | `-` | Accessibility label describing the element. |
| `background` | `Color` | No | `-` | Background color of the overlay (element being interacted with). |
| `borderColor` | `Color` | No | `-` | Border color of the element. |
| `borderRadius` | `ResponsiveProp<BorderRadius>` | No | `-` | - |
| `borderWidth` | `ResponsiveProp<BorderWidth>` | No | `-` | - |
| `children` | `ReactNode` | No | `-` | Label for the control option. |
| `color` | `ResponsiveProp<Color>` | No | `-` | - |
| `controlColor` | `Color` | No | `bgPrimary` | Sets the checked/active color of the control. |
| `elevation` | `ResponsiveProp<Elevation>` | No | `-` | - |
| `iconStyle` | `CSSProperties` | No | `-` | Style for the icon element |
| `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
| `key` | `Key \| null` | No | `-` | - |
| `labelStyle` | `CSSProperties` | No | `-` | Style for the label element |
| `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
| `ref` | `((instance: HTMLInputElement \| null) => void) \| RefObject<HTMLInputElement> \| null` | No | `-` | - |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
| `type` | `button \| reset \| submit` | No | `-` | - |
| `value` | `string` | No | `-` | Value of the option. Useful for multiple choice. |