checkbox

Checkboxes allow a user to choose one or more options from a list. They can also be used to turn an option on and off.

Import

import { Checkbox } from '@xpanseinc/nebula'

Usage

Default

<Checkbox />

Default Checked

If defaultChecked is true, the checkbox will be initially checked.

<Checkbox defaultChecked />

Controlled Checked

If checked is true, the checkbox will be checked. Pass onChange to update its value (since it is now controlled).

<ControlledExample />

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

Disabled

<HStack spacing={8}>
  <Checkbox disabled />

  <Checkbox disabled checked />
</HStack>

Indeterminate

<IndeterminateExample />

export const IndeterminateExample = () => {
  const [checkedItems, setCheckedItems] = React.useState([false, false])
  const allChecked = checkedItems.every(Boolean)
  const isIndeterminate = checkedItems.some(Boolean) && !allChecked
  return (
    <VStack spacing={8}>
      <CheckboxField
        label="Parent"
        checked={allChecked}
        indeterminate={isIndeterminate}
        onChange={(e) => setCheckedItems([e.target.checked, e.target.checked])}
      />
      <VStack spacing={8} css={{ paddingLeft: 32 }}>
        <CheckboxField
          label="Child 1"
          checked={checkedItems[0]}
          onChange={(e) =>
            setCheckedItems(([, last]) => [e.target.checked, last])
          }
        />
        <CheckboxField
          label="Child 2"
          checked={checkedItems[1]}
          onChange={(e) =>
            setCheckedItems(([first]) => [first, e.target.checked])
          }
        />
      </VStack>
    </VStack>
  )
}
```

## Checkbox Field

### Default

<CheckboxField label="Label" defaultChecked />
<CheckboxField label="Disabled" disabled />

### With helper text

<VStack spacing={8}>
  <CheckboxField
    label="Field 1"
    helperText="Some helpful copy that explains the option."
  />
  <CheckboxField label="Field 2" />
  <CheckboxField disabled label="Field 3" />
  <CheckboxField label="Field 4" defaultChecked />
</VStack>

### With tooltip

<CheckboxField
  label="Label"
  helperText="Some helpful copy that explains the option."
  tooltip="Some less important, but clarifying text"
/>

### Invalid

<CheckboxField label="Label" invalid error="You cannot check this checkbox" />