Skip to main content

Checkbox

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

1'use client';
2

3import { Checkbox } from '@/components/ui/checkbox';
4

5export function Default() {
6  return <Checkbox aria-label="Default checkbox" />;
7}

Installation

pnpm dlx mateui add checkbox

Anatomy

1import { Checkbox } from '@/components/ui/checkbox';
1<Checkbox id="terms" />

Variants

Default

1'use client';
2

3import { Checkbox } from '@/components/ui/checkbox';
4

5export function Default() {
6  return <Checkbox aria-label="Default checkbox" />;
7}

With Label

Checkbox component alongside a label for context.
1'use client';
2

3import { Checkbox } from '@/components/ui/checkbox';
4import { Label } from '@/components/ui/label';
5

6export function WithLabel() {
7  return (
8    <div className="flex items-center gap-2">
9      <Checkbox id="terms" />
10      <Label htmlFor="terms">Accept terms and conditions</Label>
11    </div>
12  );
13}

Disabled

A disabled state stops interactions.
1'use client';
2

3import { Checkbox } from '@/components/ui/checkbox';
4import { Label } from '@/components/ui/label';
5

6export function Disabled() {
7  return (
8    <div className="flex items-center gap-2">
9      <Checkbox id="disabled-terms" disabled />
10      <Label htmlFor="disabled-terms" className="opacity-50">
11        Accept terms and conditions
12      </Label>
13    </div>
14  );
15}

API Reference

Checkbox

PropTypeDefaultDescription
onCheckedChange(checked: boolean) => void-Callback when checked state changes
disabledboolean-Disables the checkbox
PreviousCardNextCollapsible