Accordion Alert Dialog Aspect Ratio Avatar Badge Button Card Checkbox Collapsible Command Context Menu Dialog Dropdown Menu Glass Hover Card Input Label Popover Progress Radio Group Resizable Layout Scroll Area Select Band Screen Slider Spinner Switch Tabs Textarea Toaster Toggle Group Tooltip Form Prose Link Video Carousel Sheet Skeleton Media Stack Nav Items Breadcrumb Step Indicator Input Otp Navigation Menu Drawer

Checkbox

import { Checkbox } from '@hanzo/ui'

Default

A box bound to its label by `id` and `htmlFor`, so clicking the words toggles it too; the shape of any single yes-or-no line in a form.

I agree to the terms of service

export function Default() {
  return (
    <XStack gap="$2" items="center">
      <Checkbox id="terms" />
      <Label htmlFor="terms">I agree to the terms of service</Label>
    </XStack>
  )
}

States

The three values a box can show, then a disabled box off and on, for a setting the reader may see but not change.

export function States() {
  return (
    <YStack gap="$3">
      <XStack gap="$2" items="center">
        <Checkbox id="unchecked" />
        <Label htmlFor="unchecked">Unchecked</Label>
      </XStack>
      <XStack gap="$2" items="center">
        <Checkbox id="checked" defaultChecked />
        <Label htmlFor="checked">Checked</Label>
      </XStack>
      <XStack gap="$2" items="center">
        <Checkbox id="indeterminate" defaultChecked="indeterminate" />
        <Label htmlFor="indeterminate">Indeterminate</Label>
      </XStack>
      <XStack gap="$2" items="center">
        <Checkbox id="off" disabled />
        <Label htmlFor="off">Disabled</Label>
      </XStack>
      <XStack gap="$2" items="center">
        <Checkbox id="off-checked" disabled defaultChecked />
        <Label htmlFor="off-checked">Disabled and checked</Label>
      </XStack>
    </YStack>
  )
}

Controlled

`checked` and `onCheckedChange` hold the value in React state, so the form shows a billing address field only while the box is off.

Billing address is the same as shipping

export function Controlled() {
  const [same, setSame] = useState(true)
  return (
    <YStack gap="$3" width={320}>
      <XStack gap="$2" items="center">
        <Checkbox
          id="billing"
          checked={same}
          onCheckedChange={(next) => setSame(next === true)}
        />
        <Label htmlFor="billing">Billing address is the same as shipping</Label>
      </XStack>
      {same ? null : <Input placeholder="Billing address" />}
    </YStack>
  )
}

Select all

A parent box shows `indeterminate` while only some rows are checked and checks or clears them all when pressed, the head of any list with bulk actions.

All files

README.md

package.json

src/index.ts

export function SelectAll() {
  const files = ["README.md", "package.json", "src/index.ts"]
  const [picked, setPicked] = useState(["README.md"])
  const all: boolean | "indeterminate" =
    picked.length === files.length
      ? true
      : picked.length === 0
        ? false
        : "indeterminate"
  return (
    <YStack gap="$2">
      <XStack gap="$2" items="center">
        <Checkbox
          id="all-files"
          checked={all}
          onCheckedChange={(next) => setPicked(next === true ? files : [])}
        />
        <Label htmlFor="all-files">All files</Label>
      </XStack>
      <YStack gap="$2" pl="$5">
        {files.map((file) => (
          <XStack key={file} gap="$2" items="center">
            <Checkbox
              id={file}
              name="files"
              value={file}
              checked={picked.includes(file)}
              onCheckedChange={(next) =>
                setPicked(
                  next === true
                    ? [...picked, file]
                    : picked.filter((f) => f !== file)
                )
              }
            />
            <Label htmlFor={file}>{file}</Label>
          </XStack>
        ))}
      </YStack>
    </YStack>
  )
}

Types

export type CheckboxProps = ComponentProps<typeof GuiCheckbox>

Exports

Checkbox