title: "Switch" slug: "/packages/switch" category: "control" componentNames:

• "Switch"

Switch

The Switch component allows switching between enabled and disabled states. It is alternative way to display a checkbox.

import Switch from "@ds-kit/switch"

Basic Example

When creating switches, keep in mind that the name is required, as this links the label to the checkbox element and provides proper accessibility. Ideally you should also always set a label. The label is invisible, since it has a aria-hidden attribute.

class ExampleSwitch extends React.Component {
  constructor(props) {
    super(props)
    this.state = { checked: false }
  }

  render() {
    return (
      <>
        <Switch
          name="sample-switch"
          label="Show something"
          checked={this.state.checked}
          onChange={() => {
            this.setState({ checked: !this.state.checked })
          }}
        />
      </>
    )
  }
}

Use the onChange function to hook the Switch up to state.