Switch

Import

import { Switch } from '@contentful/f36-components';
// or
import { Switch } from '@contentful/f36-forms';

Examples

Using as a controlled input

Controlled components in React are those in which form data is handled by the component’s state.

For using the Switch as a controlled input, you need to:

• Pass the isChecked property, with this property it will already be a controlled component;
• Pass a onChange handler, so you can use it to update the value of isChecked;

Setting the isChecked will already define it as a controlled input.

Hide code
function SwitchControlledExample() {
  const [switchState, setSwitchState] = useState(false);

  return (
    <Switch
      name="allow-cookies-controlled"
      id="allow-cookies-controlled"
      isChecked={switchState}
      onChange={() => setSwitchState((prevState) => !prevState)}
    >
      Allow cookies
    </Switch>
  );
}
function SwitchControlledExample() {
  const [switchState, setSwitchState] = useState(false);

  return (
    <Switch
      name="allow-cookies-controlled"
      id="allow-cookies-controlled"
      isChecked={switchState}
      onChange={() => setSwitchState((prevState) => !prevState)}
    >
      Allow cookies
    </Switch>
  );
}
Open in Playground

Using as an uncontrolled input

Uncontrolled components are those for which the form data is handled by the DOM itself. “Uncontrolled” refers to the fact that these components are not controlled by React state.

You can use the Switch as an uncontrolled input, for that you can:

• Set the defaultChecked property, it will ensure that the checked state can be altered normally.
• Don't set the isChecked as it will make the input controlled.

Hide code
function SwitchUncontrolledExample() {
  return (
    <Switch
      name="allow-cookies-uncontrolled"
      id="allow-cookies-uncontrolled"
      defaultChecked={true}
    >
      Allow cookies
    </Switch>
  );
}
function SwitchUncontrolledExample() {
  return (
    <Switch
      name="allow-cookies-uncontrolled"
      id="allow-cookies-uncontrolled"
      defaultChecked={true}
    >
      Allow cookies
    </Switch>
  );
}
Open in Playground

Switch vs Checkbox

Switch is a two-step action: selection and execution, whereas checkbox is just selection of an option and its execution usually requires another control.

Hide code
function SwitchUncontrolledExample() {
  const [cookiesState, setCookiesState] = useState(false);

  return (
    <Stack flexDirection="column">
      <Switch
        name="switch-cookies-choice"
        id="switch-cookies-choice"
        isChecked={cookiesState}
        onChange={() => setCookiesState((prevState) => !prevState)}
      >
        Allow cookies
      </Switch>
      <Checkbox
        name="checkbox-cookies-choice"
        id="checkbox-cookies-choice"
        isChecked={cookiesState}
        onChange={() => setCookiesState((prevState) => !prevState)}
      >
        Allow cookies
      </Checkbox>
    </Stack>
  );
}
function SwitchUncontrolledExample() {
  const [cookiesState, setCookiesState] = useState(false);

  return (
    <Stack flexDirection="column">
      <Switch
        name="switch-cookies-choice"
        id="switch-cookies-choice"
        isChecked={cookiesState}
        onChange={() => setCookiesState((prevState) => !prevState)}
      >
        Allow cookies
      </Switch>
      <Checkbox
        name="checkbox-cookies-choice"
        id="checkbox-cookies-choice"
        isChecked={cookiesState}
        onChange={() => setCookiesState((prevState) => !prevState)}
      >
        Allow cookies
      </Checkbox>
    </Stack>
  );
}
Open in Playground

Switch disabled

Hide code
function SwitchUncontrolledExample() {
  return (
    <Switch
      id="include-cutlery"
      name="include-cutlery"
      defaultChecked={false}
      isDisabled
    >
      Include cutlery with your order.
    </Switch>
  );
}
function SwitchUncontrolledExample() {
  return (
    <Switch
      id="include-cutlery"
      name="include-cutlery"
      defaultChecked={false}
      isDisabled
    >
      Include cutlery with your order.
    </Switch>
  );
}
Open in Playground

Accessibility

• Use clear and concise label for Switch component
• If needed provide additional information for the user if Switch will cause a change in the context