Checkbox

Checkbox component is used in forms when a user needs to select multiple values from several options.

The Checkbox component composes Box.

Import

import { Checkbox, CheckboxGroup } from '@sajari-ui/core';

import { Checkbox, CheckboxGroup } from '@sajari-ui/core';

Usage

Basic usage of checkbox.

Editable Example

Checkbox

<Checkbox defaultChecked>Checkbox</Checkbox>

<Checkbox defaultChecked>Checkbox</Checkbox>

Disabled

Editable Example

Checkbox

<Flex space="space-x-4">
  <Checkbox disabled>Checkbox</Checkbox>
  <Checkbox disabled defaultChecked>
    Checkbox
  </Checkbox>
</Flex>

<Flex space="space-x-4">
  <Checkbox disabled>Checkbox</Checkbox>
  <Checkbox disabled defaultChecked>
    Checkbox
  </Checkbox>
</Flex>

Invalid

Editable Example

Checkbox

<Checkbox invalid>Checkbox</Checkbox>

<Checkbox invalid>Checkbox</Checkbox>

Indeterminate

Editable Example

Parent Checkbox

Child Checkbox 1

Child Checkbox 2

function IndeterminateExample() {
  const [checkedItems, setCheckedItems] = React.useState([true, false]);

  const allChecked = checkedItems.every(Boolean);
  const isIndeterminate = checkedItems.some(Boolean) && !allChecked;

  return (
    <>
      <Checkbox
        checked={allChecked}
        indeterminate={isIndeterminate}
        onChange={(e) => setCheckedItems([e.target.checked, e.target.checked])}
        children="Parent Checkbox"
      />
      <Flex padding="pl-6" margin="mt-2" flexDirection="flex-col" space="space-y-2">
        <Checkbox
          checked={checkedItems[0]}
          onChange={(e) => setCheckedItems([e.target.checked, checkedItems[1]])}
          children="Child Checkbox 1"
        />
        <Checkbox
          checked={checkedItems[1]}
          onChange={(e) => setCheckedItems([checkedItems[0], e.target.checked])}
          children="Child Checkbox 2"
        />
      </Flex>
    </>
  );
}

function IndeterminateExample() {
  const [checkedItems, setCheckedItems] = React.useState([true, false]);
  const allChecked = checkedItems.every(Boolean);
  const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
  return (
    <>
      <Checkbox
        checked={allChecked}
        indeterminate={isIndeterminate}
        onChange={(e) => setCheckedItems([e.target.checked, e.target.checked])}
        children="Parent Checkbox"
      />
      <Flex padding="pl-6" margin="mt-2" flexDirection="flex-col" space="space-y-2">
        <Checkbox
          checked={checkedItems[0]}
          onChange={(e) => setCheckedItems([e.target.checked, checkedItems[1]])}
          children="Child Checkbox 1"
        />
        <Checkbox
          checked={checkedItems[1]}
          onChange={(e) => setCheckedItems([checkedItems[0], e.target.checked])}
          children="Child Checkbox 2"
        />
      </Flex>
    </>
  );
}

CheckboxGroup

Sajari exports a CheckboxGroup component to help manage the checked state of it's children.

Editable Example

Naruto

Sasuke

kakashi

<CheckboxGroup defaultValue={['naruto', 'kakashi']}>
  <Checkbox value="naruto">Naruto</Checkbox>
  <Checkbox value="sasuke">Sasuke</Checkbox>
  <Checkbox value="kakashi">kakashi</Checkbox>
</CheckboxGroup>

<CheckboxGroup defaultValue={['naruto', 'kakashi']}>
  <Checkbox value="naruto">Naruto</Checkbox>
  <Checkbox value="sasuke">Sasuke</Checkbox>
  <Checkbox value="kakashi">kakashi</Checkbox>
</CheckboxGroup>

You can also make checkbox group appear horizontally by passing the inline prop.

Editable Example

Itachi

Madara

Kisame

<CheckboxGroup inline spacing="space-x-4" defaultValue={['itachi', 'kisame']}>
  <Checkbox value="itachi">Itachi</Checkbox>
  <Checkbox value="madara">Madara</Checkbox>
  <Checkbox value="kisame">Kisame</Checkbox>
</CheckboxGroup>

<CheckboxGroup inline spacing="space-x-4" defaultValue={['itachi', 'kisame']}>
  <Checkbox value="itachi">Itachi</Checkbox>
  <Checkbox value="madara">Madara</Checkbox>
  <Checkbox value="kisame">Kisame</Checkbox>
</CheckboxGroup>

Props

Checkbox Props

Name	Type	Description
`id`	`string`	The id of the checkbox for associated with a label.
`name`	`string`	The input name of the checkbox when used in a form.
`value`	`string`, `boolean`	The value of the checkbox.
`children`	`React.ReactNode`	The children of the checkbox.
`aria-label`	`string`	The aria-label of the checkbox for accessibility.
`aria-labelledby`	`string`	The aria-labelledby of the checkbox for accessibility.
`checked`	`boolean`	If `true`, set the checkbox to the checked state.
`defaultChecked`	`boolean`	If `true`, the checkbox will be initially checked.
`disabled`	`boolean`	If `true`, set the disabled to the invalid state.
`invalid`	`boolean`	If `true`, set the checkbox to the invalid state.

CheckboxGroup Props

CheckboxGroup composes Box so you can pass all Box props.

Name	Type	Description
`id`	`string`	The id of the checkbox group.
`name`	`string`	The name of the checkbox group. This attribute is
`value`	`Array<Checkbox["value"]>`	The value of the checkbox group
`defaultValue`	`Array<Checkbox["value"]>`	The initial value of the checkbox group
`onChange`	`(values: Array<Checkbox["value"]>): void`	The callback fired when any children Checkbox is checked or unchecked
`children`	`React.ReactNode`	The content of the checkbox group. Must be the `Checkbox` component
`spacing`	`FlexProps["space"]`	The space between each checkbox
`inline`	`boolean`	If `true`, the checkboxes will aligned horizontally.