Question 1

What is the Checkbox?

Accepted Answer

shadcn.io's Checkbox is a box people tick for a yes-or-no choice or to pick any number of options: accepting terms, choosing features, selecting rows. It is built on Base UI for React, with keyboard support, a focus ring, a checked and an indeterminate state, and controlled or uncontrolled use. Each example in this gallery is one small file built from the Checkbox and the Field parts.

Question 2

Are these checkbox examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

How is this different from a plain checkbox input?

Accepted Answer

A native checkbox looks different in every browser and is hard to restyle. The Checkbox draws its own box and check icon with Tailwind classes and theme tokens, so it matches the rest of the UI in light and dark mode, while Base UI keeps the checkbox role, its checked or mixed state, Space to toggle and form submission through its name.

Question 4

When should I use a Checkbox, a Switch or a Radio Group?

Accepted Answer

A Checkbox for independent choices, or a single agreement, that take effect when a form is submitted. A Switch for a setting that applies the moment it changes. A Radio Group when exactly one option of several must be picked.

Question 5

How do I build a select-all checkbox with an indeterminate state?

Accepted Answer

Derive the parent's state from its children on every render: checked when all are checked, unchecked when none are, indeterminate when some are. When the parent changes, set every child to its new value. The nested list shows the pattern, and the indeterminate checkbox shows the state on its own.

Question 6

How do I add a description under the label?

Accepted Answer

Put the checkbox in a horizontal Field and wrap the FieldLabel and a FieldDescription in FieldContent. The description is muted and smaller, and the field keeps the box level with the label's first line however far the text wraps.

Question 7

How do I show a checkbox that can't be changed?

Accepted Answer

Disable the checkbox and add data-disabled to its Field, so the label fades with the box. A disabled box can still be checked, for options that are included and locked. The disabled checkbox shows both states.

Question 8

How do I show a validation error on a checkbox?

Accepted Answer

Set invalid on the Field: the box and label turn destructive and the checkbox is marked invalid for screen readers. Add a FieldError under it with the message, such as You must accept the terms.

Question 9

How do I install a checkbox example?

Accepted Answer

Sign in with a free account, open the example and run the install command under Installation. The CLI adds the example's file to your project along with the Checkbox and Field components if you don't have them yet.

Question 10

How do I control a checkbox's state?

Accepted Answer

Pass the checked value and update it in the change handler; without them the box keeps its own state. Each library names these props its own way (checked and onCheckedChange, isSelected and onChange in React Aria, v-model:checked in Vue), and every example's code uses the right ones for the page you're on. The to-do checkbox holds its state so the label can react.

Question 11

How do I change the checkbox's color or size?

Accepted Answer

Add classes on the Checkbox: a size class such as size-5, and colors for the checked state behind the checked variant, like the green fill in the custom indicator. Use theme tokens so dark mode follows. To change every checkbox, edit the checkbox file in your project.

Question 12

Can a checkbox show a partial selection?

Accepted Answer

Yes. The indeterminate state shows a partial selection and exposes the checkbox as mixed to screen readers, so a select-all over a partly selected list says so.

Question 13

What are checkbox examples built on?

Accepted Answer

shadcn.io's Checkbox and Field components, styled with Tailwind CSS and Lucide icons. In React the Checkbox is built on Base UI, React Aria, Ark UI or Radix UI, whichever your project uses; the Vue, Svelte and Solid versions are built on Ark UI.

Question 14

Are checkbox examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. Each checkbox has the checkbox role and its checked, unchecked or mixed state, Tab reaches it and Space toggles it, and the focus ring is visible. Every example labels its boxes, and clicking a label toggles its box.

Question 15

Do the examples work with server rendering?

Accepted Answer

Yes. They render on the server, and the checkboxes become interactive in the browser. Examples that keep state in the file are client components; in Next.js they carry the "use client" directive.

Question 16

Which Tailwind CSS version do the examples use?

Accepted Answer

Tailwind CSS v4. The classes are standard utilities and theme tokens such as bg-primary and text-muted-foreground, read from your theme's CSS variables.

Checkbox Examples

Nested List

With Description

With Subtitle

With Subtitle and Description

Custom Indicator Checkbox

Disabled Checkbox

Horizontal List Checkbox

Indeterminate Checkbox

Right-Aligned Checkbox

Simple Checkbox

Todo Style Checkbox

Vertical List Checkbox

More component examples

Combobox

Date Picker

Radio Group

Slider

Switch

Calendar

Collapsible

Command

Checkbox examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every checkbox example. One prompt away.