Checkbox

A control that allows the user to toggle between checked and unchecked states.

Improve on GitHub

Installation

Add this component to your project using the npui CLI:

npx npui add checkbox

Variants & Examples

Default Checkbox

A basic checkbox with a label.

Accept terms and conditions

Code for Default Checkbox

1import { Checkbox } from "@/components/ui/checkbox"
2import { Label } from "@/components/ui/label"
3
4export function DefaultCheckbox() {
5  return (
6    <div className="flex items-center space-x-2">
7      <Checkbox id="terms" />
8      <Label htmlFor="terms">Accept terms and conditions</Label>
9    </div>
10  )
11}

Disabled Checkbox

A disabled checkbox.

Accept terms (disabled)

Code for Disabled Checkbox

1import { Checkbox } from "@/components/ui/checkbox"
2import { Label } from "@/components/ui/label"
3
4export function DisabledCheckbox() {
5  return (
6    <div className="flex items-center space-x-2">
7      <Checkbox id="disabled-terms" disabled />
8      <Label htmlFor="disabled-terms">Accept terms (disabled)</Label>
9    </div>
10  )
11}

Props

These are the available props for the Checkbox component:

Prop	Type	Description	Default
checked	boolean \| 'indeterminate'	The controlled checked state of the checkbox.	-
onCheckedChange	(checked: boolean \| 'indeterminate') => void	Event handler called when the checked state changes.	-
defaultChecked	boolean	The initial checked state of the checkbox.	false
disabled	boolean	Whether the checkbox is disabled.	false