Bifrost Design System

Design React CSS

Figma

import SwitchCard from "@intility/bifrost-react/SwitchCard";

SwitchCard

Go to top

Props

Also see /react/checkboxCard

CheckboxCard component

Also see /react/switch

Switch component

For convenience, <SwitchCard> is provided as an alias for <CheckboxCard type="switch">. Otherwise, it functions exactly the same as <CheckboxCard>.

Basic usage

TSX

<SwitchCard label="Switch card">
  Users often expect checkboxes to be a part of a form with a submit button,
  while switches are usually expected to be automatically 'saved'.
</SwitchCard>

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

See <CheckboxCard> for more examples.

Inactive state

Use state="inactive" for a focusable, tooltip-friendly replacement for disabled. The card chrome stays at full opacity; only the switch icon dims. See <CheckboxCard> for the full pattern.

TSX

<SwitchCard state="inactive" label="Inactive switch card">...</SwitchCard>

Inactive switch cardThis setting isn't available with your current plan.

Checked inactive switch cardAlready on, but you can't toggle it right now.

Sandbox

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

Open Sandbox

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

export default function SwitchCardDemo() {
  const [selected, setSelected] = useState(true);
  return (
    <div className="bf-page-padding">
      <SwitchCard
        label="Switch card"
        checked={selected}
        onChange={() => setSelected(!selected)}
      >
        Users often expect checkboxes to be a part of a form with a submit
        button, while switches are usually expected to be automatically 'saved'.
      </SwitchCard>
      <p>Current state: {selected.toString()}</p>
    </div>
  );
}