Checkbox

A customizable checkbox input with bold styling and accessible controls.

Accept terms and conditions

Installation

npx neobrutal add checkbox

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

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

Unchecked

Checked

Disabled

Prop	Type	Default	Description
checked	boolean \| 'indeterminate'	-	The controlled checked state of the checkbox.
defaultChecked	boolean	-	The default checked state when uncontrolled.
onCheckedChange	(checked: boolean \| 'indeterminate') => void	-	Event handler called when the checked state changes.
disabled	boolean	-	When true, prevents the user from interacting with the checkbox.
required	boolean	-	When true, indicates that the user must check the checkbox before the owning form can be submitted.
name	string	-	The name of the checkbox. Submitted with its owning form as part of a name/value pair.
value	string	-	The value given as data for the checkbox when submitted in a form.