Switch

@coinbase/cds-web@8.47.1

A control for toggling between on and off.

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

󰒨

Source

󰏖

Storybook

󰏖

Figma

󰕨

󰏖

View as Markdown

---

Peer dependencies

• framer-motion: ^10.18.0

---

Related components

• Checkbox,
• ControlGroup,
• Radio

Loading...

󰙡

Live Code

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.

Loading...

󰙡

Live Code

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:

Loading...

󰙡

Live Code

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.

Loading...

󰙡

Live Code

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

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