Data Display
Forms
Navigation
Checkbox
A control allowing the user to toggle between checked and not checked.
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
export default function Particle() {
return (
<Label>
<Checkbox />
Accept terms and conditions
</Label>
);
}
Installation
pnpm dlx cnippet@latest add checkbox
Usage
import { Checkbox } from "@/components/ui/checkbox"<Checkbox />Examples
For accessible labelling and validation, prefer using the Field component to wrap checkboxes. See the related example: Checkbox field.
With Description
By clicking this checkbox, you agree to the terms and conditions.
import * as React from "react";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
export default function Particle() {
const id = React.useId();
return (
<div className="flex items-start gap-2">
<Checkbox defaultChecked id={id} />
<div className="flex flex-col gap-1">
<Label htmlFor={id}>Accept terms and conditions</Label>
<p className="text-muted-foreground text-xs">
By clicking this checkbox, you agree to the terms and conditions.
</p>
</div>
</div>
);
}
Card Style
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
export default function Particle() {
return (
<Label className="flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50">
<Checkbox defaultChecked />
<div className="flex flex-col gap-1">
<p>Enable notifications</p>
<p className="text-muted-foreground text-xs">
You can enable or disable notifications at any time.
</p>
</div>
</Label>
);
}
Form Integration
Field provides accessible labelling and validation primitives for form controls. Use it with Form to submit values.
"use client";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";
export default function Particle() {
const [loading, setLoading] = React.useState(false);
const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
setLoading(true);
await new Promise((r) => setTimeout(r, 800));
setLoading(false);
const accepted = formData.get("terms");
alert(`Terms: ${accepted}`);
};
return (
<Form className="w-auto" onSubmit={onSubmit}>
<Field name="terms">
<FieldLabel>
<Checkbox defaultChecked disabled={loading} value="yes" />
Accept terms and conditions
</FieldLabel>
</Field>
<Button disabled={loading} type="submit">
Submit
</Button>
</Form>
);
}