Docs
Checkbox Input
Checkbox Input
A flexible checkbox component with labels, descriptions, validation, and Zod integration for forms.
16 views
1 downloads
Based onStripe Checkout
Loading...
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
1"use client"23import { CheckboxInput } from "@/registry/inputs/checkbox-input"45export function Component() {6 return (7 <CheckboxInput8 label="Accept Terms"9 name="terms"10 description="I agree to the terms and conditions"11 required12 />13 )14}
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 |