Checkbox

Selection control built on React Aria's Checkbox. The label is the component's children, so it's wired to the input automatically — no htmlFor to keep in sync.

import { Checkbox } from "@pockets-ui/components"

States

isIndeterminate is a visual state layered over the checked value, not a third value. Use it for a parent checkbox summarising a partially-selected group, and resolve it to true/false when the user presses it.

Unchecked

Checked

Indeterminate

Code

import { Checkbox } from "@pockets-ui/components"

export default function CheckboxStates() {
  return (
    <>
      <Checkbox>Unchecked</Checkbox>
      <Checkbox defaultSelected>Checked</Checkbox>
      <Checkbox isIndeterminate>Indeterminate</Checkbox>
    </>
  )
}

Disabled

Disabled & checked

Code

import { Checkbox } from "@pockets-ui/components"

export default function CheckboxDisabled() {
  return (
    <>
      <Checkbox isDisabled>Disabled</Checkbox>
      <Checkbox isDisabled defaultSelected>
        Disabled &amp; checked
      </Checkbox>
    </>
  )
}