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

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.

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

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

Controlled mode

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

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'.

Current state: true