UILab

Checkbox

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

By clicking this checkbox, you agree to the terms.

"use client"

import {
  Checkbox,
  Field,

Usage

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

Examples

Basic

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

"use client"

import {
  Checkbox,
  Field,

Description

Use FieldContent and FieldDescription for helper text.

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

"use client"

import {
  Checkbox,
  Field,

Disabled

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

"use client"

import {
  Checkbox,
  Field,

Group

Use multiple fields to create a checkbox list.

Show these items on the desktop:

Select the items you want to show on the desktop.

"use client"

import {
  Checkbox,
  Field,

On this page