Checkbox

A control that allows the user to toggle between checked and not checked states. Built on Radix UI Checkbox for full accessibility.

Preview

Default

Amenities Filter

Disabled

Usage

tsx
import { Checkbox } from "zostel-ui";
import { Label } from "zostel-ui";

<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

{/* Controlled */}
<Checkbox
  checked={isChecked}
  onCheckedChange={setIsChecked}
/>

Props

checked
Type: boolean | 'indeterminate'
Default: false

The controlled checked state.

defaultChecked
Type: boolean
Default: false

The default checked state when uncontrolled.

onCheckedChange
Type: (checked: boolean | 'indeterminate') => void
Default: —

Called when the checked state changes.

disabled
Type: boolean
Default: false

Disables the checkbox.

className
Type: string
Default: ""

Additional CSS classes to apply.
Previous Select Next Radio Group