Checkbox

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

Accept terms and conditions

By clicking this checkbox, you agree to the terms.

Enable notifications

You can enable or disable notifications at any time.

import {
  Checkbox,
  Field,
  FieldContent,
  FieldDescription,

Usage

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

<Checkbox />

Pair the checkbox with Field and FieldLabel for proper layout and labeling.

Accept terms and conditions

import {
  Checkbox,
  Field,
  FieldGroup,
  FieldLabel

Use FieldContent and FieldDescription for helper text.

Accept terms and conditions

By clicking this checkbox, you agree to the terms and conditions.

import {
  Checkbox,
  Field,
  FieldContent,
  FieldDescription,

Use the disabled prop to prevent interaction and add the data-disabled attribute to the <Field> component for disabled styles.

Enable notifications

import {
  Checkbox,
  Field,
  FieldGroup,
  FieldLabel

Use multiple fields to create a checkbox list.

Show these items on the desktop:

Select the items you want to show on the desktop.

Hard disks

External disks

CDs, DVDs, and iPods

Connected servers

import {
  Checkbox,
  Field,
  FieldDescription,
  FieldGroup,

Card

Displays a card with header, content, and footer.

Collapsible

An interactive component which expands/collapses a panel.