Switch

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

Switch joins the track and its label into one click area; clicking the label toggles the switch too.

Option label

import { Switch } from '@bigbang/ui';

export default function Default() {
  return <Switch label="Option label" />;
}

States

Off, on, saving (loading) and disabled.

import { Switch } from '@bigbang/ui';

export default function States() {
  return (
    <div className="flex flex-col items-start gap-md">
      <Switch label="Option label" />
      <Switch label="Option label" defaultChecked />
      <Switch label="Option label" defaultChecked loading loadingLabel="Saving" />
      <Switch label="Option label" disabled />
      <Switch label="Option label" disabled defaultChecked />
    </div>
  );
}

With a description

description sits under the label and is linked to the switch with aria-describedby.

Option labelOption description goes here.

import { Switch } from '@bigbang/ui';

export default function WithDescription() {
  return <Switch label="Option label" description="Option description goes here." defaultChecked />;
}

Saving a change

The switch shows the new state at once; while it saves, loading shows a spinner in the thumb and ignores new changes.

Option label

import { Switch } from '@bigbang/ui';
import { useState } from 'react';

export default function SavingChange() {
  const [checked, setChecked] = useState(false);
  const [loading, setLoading] = useState(false);
  return (
    <Switch
      label="Option label"
      checked={checked}
      loading={loading}
      loadingLabel="Saving"
      onCheckedChange={(next) => {
        setChecked(next);
        setLoading(true);
        setTimeout(() => setLoading(false), 1000);
      }}
    />
  );
}

Light and dark mode

An on track takes the color-action-primary-default fill.

import { Switch } from '@bigbang/ui';

export default function States() {
  return (
    <div className="flex flex-col items-start gap-md">
      <Switch label="Option label" />
      <Switch label="Option label" defaultChecked />
      <Switch label="Option label" defaultChecked loading loadingLabel="Saving" />
      <Switch label="Option label" disabled />
      <Switch label="Option label" disabled defaultChecked />
    </div>
  );
}