Checkbox

Form element that allows users to select multiple items from a set of options. The checkbox shares an interface with the Radio and Switch components.

Import

// Tree shakable import
import { Checkbox } from '@bojagi/pablo';
// Or direct import
import { Checkbox } from '@bojagi/pablo/Checkbox';

Examples

Single checkbox

Live Editor

() => {
  const [checked, setChecked] = React.useState(false);
  return (
    <Checkbox checked={checked} onChange={() => setChecked(!checked)} />
  );
}

Result

Loading...

Checkboxes with labels

You can pass an optional label prop with a ReactNode value to show a label next to the checkbox.

Live Editor

() => {
  const [checked, setChecked] = React.useState(false);
  const [checkedTwo, setCheckedTwo] = React.useState(true);
  return (
    <Flex gap={0.5}>
      <Checkbox label="Spaghetti" checked={checked} onChange={() => setChecked(!checked)} />
      <Checkbox label="Pizza" checked={checkedTwo} onChange={() => setCheckedTwo(!checkedTwo)} />
    </Flex>
  );
}

Result

Loading...

Small checkboxes

You can pass the size prop with the small value which renders a smaller version.

Live Editor

() => {
  const [checked, setChecked] = React.useState(false);
  const [checkedTwo, setCheckedTwo] = React.useState(true);
  return (
    <Flex gap={0.5}>
      <Checkbox size="small" checked={checked} onChange={() => setChecked(!checked)} />
      <Checkbox size="small" checked={checkedTwo} onChange={() => setCheckedTwo(!checkedTwo)} />
    </Flex>
  );
}

Result

Loading...

Props

Name	Type	Default Value	Required	Description

Box props

Name	Type	Default Value	Required	Description