Switch

For convenience, <Switch> is provided as an alias for <Checkbox type="switch">.

A <Switch> functions exactly the same a normal checkbox and most of the same props are supported.

However, users expect checkboxes to be a part of a form with a submit button, while switches are usually expected to be automatically 'saved'.

<Switch label="Switch toggle" />
<Switch label="Switch toggle" />

Alignment

You can align the switch to the left using align="left" (default is "right")

<Switch align="left" label="Left-aligned switch" />
<Switch align="left" label="Left-aligned switch" />

Button style

Use button and small props to display as a button.

<Switch button label="Button style" />
<Switch small button label="Small button style" />
<Switch button label="Button style" />
<Switch small button label="Small button style" />

Sandbox

You can bind a switch to a boolean state using the checked prop and update your state every time the onChange event is triggered.

import { useState } from "react";
import Switch from "@intility/bifrost-react/Switch";

export default function SwitchDemo() {
  const [selected, setSelected] = useState(true);
  return (
    <div className="bf-page-padding">
      <Switch
        label="Use checked and onChange props"
        checked={selected}
        onChange={() => setSelected(!selected)}
      />
      <p>Current state: {selected.toString()}</p>
    </div>
  );
}