Switch

Sign up for the newsletter

e => setChecked(e.target.checked)

import * as React from "react";
import { Switch } from "spaceweb/switch";

export default () => {
  const [checked, setChecked] = React.useState(false);
  return (
    <Switch
      checked={checked}
      intent="default"
      onChange={e => setChecked(e.target.checked)}
    >
      Sign up for the newsletter
    </Switch>
  );
}

Switches are used to provide users with multiple options for selection in a series of options.

When used as a toggle they allow the user to make a binary choice usually (but not limited) in the form of a yes/no or on/off suggestion. Toggles are often used in product settings or as filter options. When engaged (on), Base Web toggles are colored and when disengaged (off) they’re grey.

When to use

• When a collection of options share context.
• When a user wants to toggle an option on/off.
• When a user wants to select multiple options.

Examples

As with many of our components, there is also an uncontrolled version, StatefulSwitch, which manages its own state.

API

Switch props

You can check the implementation of the component for more details.

Switch exports

You can import this module like so:

import {StatefulSwitch} from 'spaceweb/switch'

It exports the following components or utility functions:

• StatefulSwitch
• StyledInput
• StyledLabel
• StyledRoot
• StyledToggle
• StyledToggleTrack
• Switch