---
title: 'Form.Switch'
type: 'component'
components:
- FormSwitch
- SwitchControl
categories:
- Forms
status: 'New'
designStatus: 'Done'
devStatus: 'Done'
notes: |

---

A switch control for use with `Form.SwitchSet`. This component has identical
props to `Form.Checkbox` and is interoperable with `Form.SwitchSet` and
`useCheckboxSetValues`.

Note: extra props added to this component are passed as attributes to the
underlying `input` node. See MDN for documentation on available
[input attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes).


## Controlled Standalone Usage

```jsx live
() => {
  const [isChecked, setChecked] = useState(false);
  const handleChange = e => setChecked(e.target.checked);
  return (
    <Form.Switch checked={isChecked} onChange={handleChange}>
      I want pizza.
    </Form.Switch>
  );
}
```

## Unlabeled control

```jsx live
() => {
  const [isChecked, setChecked] = useState(false);
  const handleChange = e => setChecked(e.target.checked);
  return (
    <SwitchControl
      checked={isChecked}
      onChange={handleChange}
      aria-label="Form switch"
    />
  );
}
```

## Controlled Group Usage with useCheckboxSetValues

`useCheckboxSetValues(initialValues[])` returns an array: `[state, dispatchers]`.

`dispatchers` includes `add(value)` `remove(value)` `set(values[])` and `clear()`

```jsx live
() => {

  const [colorValues, { add, remove }] = useCheckboxSetValues(['green']);

  const handleChange = e => {
    if (e.target.checked) {
      add(e.target.value);
    } else {
      remove(e.target.value);
    }
  }
  return (
    <Form.Group>
      <Form.Label>Which Color?</Form.Label>
      <Form.SwitchSet
        name="colors"
        onChange={handleChange}
        value={colorValues}
      >
        <Form.Switch value="red">Red</Form.Switch>
        <Form.Switch value="green">Green</Form.Switch>
        <Form.Switch value="blue">Blue</Form.Switch>
        <Form.Switch value="cyan" disabled>Cyan</Form.Switch>
      </Form.SwitchSet>
    </Form.Group>
  );
}
```



## Uncontrolled Usage

```jsx live
<Form.Group>
  <Form.Label>Which Color?</Form.Label>
  <Form.SwitchSet
    name="color-two"
    onChange={(e) => console.log(e.target.value)}
    defaultValue={['green']}
  >
    <Form.Switch value="red">Red</Form.Switch>
    <Form.Switch value="green">Green</Form.Switch>
    <Form.Switch value="blue">Blue</Form.Switch>
    <Form.Switch value="cyan" disabled>Cyan</Form.Switch>
  </Form.SwitchSet>
</Form.Group>
```

## Indeterminate Usage

```jsx live
() => {
  const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
  const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);

  const handleChange = e => {
    e.target.checked ? add(e.target.value) : remove(e.target.value);
  };

  const handleCheckAllChange = e => {
    e.target.checked ? set(allCheeseOptions) : clear();
  };

  const allChecked = allCheeseOptions.every(value => checkedCheeses.includes(value));
  const someChecked = allCheeseOptions.some(value => checkedCheeses.includes(value));
  const isIndeterminate = someChecked && !allChecked;

  return (
    <>
      <div className="d-flex">
        <Form.Switch
          checked={allChecked}
          isIndeterminate={isIndeterminate}
          onChange={handleCheckAllChange}
        >
          All the cheese
        </Form.Switch>
      </div>
      <Form.SwitchSet
        className="p-2"
        value={checkedCheeses}
        onChange={handleChange}
      >
        <Form.Switch value="swiss">Swiss</Form.Switch>
        <Form.Switch value="cheddar">Cheddar</Form.Switch>
        <Form.Switch value="pepperjack">Pepperjack</Form.Switch>
      </Form.SwitchSet>
    </>
  );
}
```

## Inline layout

```jsx live
<Form.Group>
  <Form.Label>Which Color?</Form.Label>
  <Form.SwitchSet
    name="color-three"
    onChange={(e) => console.log(e.target.value)}
    defaultValue={['green']}
    isInline
  >
    <Form.Switch value="red">Red</Form.Switch>
    <Form.Switch value="green">Green</Form.Switch>
    <Form.Switch value="blue">Blue</Form.Switch>
    <Form.Switch value="cyan" disabled>Cyan</Form.Switch>
  </Form.SwitchSet>
</Form.Group>
```

## Label Position

The label is positioned to the right of the switch control by default. The label can be rendered on the left instead
by passing the `floatLabelLeft` prop.

```jsx live
<Form.Group>
  <Form.SwitchSet>
    <Form.Switch value="red">Red</Form.Switch>
    <Form.Switch value="blue" floatLabelLeft>Blue</Form.Switch>
  </Form.SwitchSet>
</Form.Group>
```

## Helper Text

A helper text component can be passed in to be rendered below the switch control.

```jsx live
<Form.Group>
  <Form.SwitchSet>
    <Form.Switch
      value="red"
      helperText={
        <span>Helper text for red switch</span>
      }
    >
      Red
    </Form.Switch>
    <Form.Switch
      value="blue"
      helperText={
        <span>Helper text for blue switch</span>
      }
    >
      Blue
    </Form.Switch>
  </Form.SwitchSet>
</Form.Group>
```
