Forms

Checkbox

Accessible checkbox with label, description, indeterminate state, and three size options

Quick Preview

Accept terms and conditions

Structure

Anatomy of the Checkbox — a check control with optional label and description.

✓Check box

label (optional)

description (optional)

Box — shows checkmark when checkedLabel — optional textDescription — optional sub-text

States

Click any checkbox to toggle it live.

Checkbox — all states

Click the interactive cells to toggle live

6 states

Unchecked

Default — not selected

Checked

Selected

Select all

Indeterminate

Partial selection

Disabled — off

Cannot interact

Disabled — on

Locked in checked

Marketing emails

Weekly digest

With description

Label + helper text

Sizes

Three size tokens — sm md (default) lg.

Sizes — sm / md / lg

Click to toggle each size

3 states

Small

Small — sm

Compact, inline use

Medium

Medium — md

Default size

Large

Large — lg

Touch-friendly

Installation

// Copy the Checkbox component from
src/components/forms/Checkbox.tsx

Usage

'use client'
import { useState } from 'react'
import { Checkbox } from '@/components/forms/Checkbox'

export default function Example() {
  const [checked, setChecked] = useState(false)
  return (
    <Checkbox
      id="tos"
      checked={checked}
      onCheckedChange={setChecked}
      label="I agree to the terms of service"
    />
  )
}

Examples

With Description

Marketing emails

Receive tips, product updates, and exclusive offers.

Security alerts

Get notified of sign-ins from new devices.

Indeterminate (Select All)

Select all frameworks

TypeScript

React

Next.js

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a forms component named Checkbox in React/Next.js.
Goal: recreate the same overall UI and behavior as the Checkbox reference from a component gallery.
What it needs to communicate: Accessible checkbox with label, description, indeterminate state, and three size options.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Support label, helper, error, disabled, and validation states.
- Ensure keyboard usability and accessible form semantics.
- Avoid unnecessary dependencies unless the behavior truly requires them.
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- checked: boolean — default false — Controlled checked state
- onCheckedChange: (checked: boolean) => void — Change handler
- indeterminate: boolean — default false — Show indeterminate (mixed) state
- label: string — Label text shown beside the checkbox
- description: string — Helper text shown below the label
- disabled: boolean — default false — Disable the checkbox
- size: "sm" | "md" | "lg" — default "md" — Checkbox and label size
- id: string — HTML id for label association

Reference usage patterns:
- No examples were documented. Infer a sensible default presentation and one richer usage example.

Feature expectations:
- Three sizes: sm, md, lg
- Indeterminate state support
- Accessible label and description
- Focus ring for keyboard navigation
- Disabled state
- forwardRef support
- Client Component

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Controlled checked state
`onCheckedChange`	`(checked: boolean) => void`	-	Change handler
`indeterminate`	`boolean`	`false`	Show indeterminate (mixed) state
`label`	`string`	-	Label text shown beside the checkbox
`description`	`string`	-	Helper text shown below the label
`disabled`	`boolean`	`false`	Disable the checkbox
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Checkbox and label size
`id`	`string`	-	HTML id for label association

Features

✓Three sizes: sm, md, lg
✓Indeterminate state support
✓Accessible label and description
✓Focus ring for keyboard navigation
✓Disabled state
✓forwardRef support
✓Client Component