Delta Components

Docs

Checkbox Input

A flexible checkbox component with labels, descriptions, validation, and Zod integration for forms.

Preview

Code

Open in

Accept terms and conditions

By accepting, you agree to our Terms of Service and Privacy Policy

Required for account creation

Overview

The Checkbox Input component provides accessible, form-ready checkboxes with integrated validation and error handling, making it essential for terms acceptance, preference settings, and multi-select scenarios. It supports both controlled and uncontrolled modes with Zod schema validation, ensuring type-safe form handling while maintaining excellent accessibility standards. Perfect for creating consistent, user-friendly selection interfaces across your application.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/checkbox-input.json

Usage

"use client"
 
import { CheckboxInput } from "@/registry/inputs/checkbox-input"
 
export function Component() {
  return (
    <CheckboxInput
      label="Accept Terms"
      name="terms"
      description="I agree to the terms and conditions"
      required
    />
  )
}

API Reference

Props

Prop	Type	Default	Description
`label`	`string`	-	Label for the checkbox field (required)
`name`	`string`	-	Name of the checkbox field for form submission (required)
`description`	`string`	`undefined`	Description text below the checkbox
`hint`	`string`	`undefined`	Hint text to display below the checkbox
`error`	`string`	`undefined`	Error message to display
`required`	`boolean`	`false`	Whether the field is required
`pending`	`boolean`	`false`	Whether the field is in a loading state
`defaultChecked`	`boolean`	`false`	Default checked state (uncontrolled)
`checked`	`boolean`	`undefined`	Controlled checked state
`disabled`	`boolean`	`false`	Whether the checkbox is disabled
`id`	`string`	`name`	ID for the checkbox element
`containerClassName`	`string`	`""`	CSS classes for the container
`checkboxClassName`	`string`	`""`	CSS classes for the checkbox
`labelClassName`	`string`	`""`	CSS classes for the label
`labelVariant`	`"default" \| "muted"`	`"default"`	Label text styling variant
`schema`	`ZodType<boolean>`	`undefined`	Zod schema for validation
`onValidate`	`(isValid: boolean, value: boolean, error?: string) => void`	`undefined`	Validation callback
`onCheckedChange`	`(checked: boolean) => void`	`undefined`	Callback when checkbox state changes