0

Checkbox

PreviousNext

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 } from "@/components/ui/checkbox"

Installation

bunx --bun shadcn@latest add @ondo-ui/checkbox

Usage

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

Examples

Basic

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

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"

Description

Use FieldContent and FieldDescription for helper text.

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

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

Disabled

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

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/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.

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

Table

NameEmailRole
Sarah Chensarah.chen@example.comAdmin
Marcus Rodriguezmarcus.rodriguez@example.comUser
Priya Patelpriya.patel@example.comUser
David Kimdavid.kim@example.comEditor
"use client"

import * as React from "react"

API reference

The component wraps Base UI Checkbox and accepts all of its props.