Checkbox

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

Live example, StorybookOpen in Storybook

Default

Checkbox joins the box and its label into one click area; clicking the label toggles the box too.

Option label

LightDark

Copy code

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

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

States

Unchecked, checked, mixed (indeterminate), invalid and disabled.

Option label

Option label

Option label

Option label

Option label

Option label

LightDark

Copy code

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

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

With a description

description sits under the label and is linked to the box with aria-describedby; it is not part of the name.

Option labelOption description goes here.

LightDark

Copy code

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

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

Controlled

With checked and onCheckedChange you hold the state.

Option label

false

LightDark

Copy code

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

export default function Controlled() {
  const [checked, setChecked] = useState(false);
  return (
    <div className="flex items-center gap-md">
      <Checkbox label="Option label" checked={checked} onCheckedChange={setChecked} />
      <code className="type-body-sm text-fg-subtle">{String(checked)}</code>
    </div>
  );
}

Light and dark mode

A checked box takes the color-action-primary-default fill.

Light

Option label

Option label

Option label

Option label

Option label

Option label

Dark

Option label

Option label

Option label

Option label

Option label

Option label

Copy code

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

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