Checkbox

Checkbox with an optional label and description, built on shadcn Field and Checkbox primitives.

Email updates

Receive product news and release notes.

Marketing consent

Installation

bash

pnpm dlx shadcn@latest add @cs/checkbox

Usage

tsx

import { Checkbox } from "@/components/cs/checkbox";

tsx

<Checkbox
  name="emailUpdates"
  label="Email updates"
  description="Receive product news and release notes."
/>

Checkbox colors

Shows all available checked-state color variants.

tsx

import { Checkbox } from "@/registry/cs/ui/checkbox"
import { PreviewPanel } from "./preview-utils"

export default function CheckboxColorsPreview() {
	return (
		<PreviewPanel>
			<Checkbox name="default" label="Default" color="default" defaultChecked />
			<Checkbox name="dark" label="Dark" color="dark" defaultChecked />
			<Checkbox name="green" label="Green" color="green" defaultChecked />
			<Checkbox name="red" label="Red" color="red" defaultChecked />
			<Checkbox name="yellow" label="Yellow" color="yellow" defaultChecked />
			<Checkbox name="orange" label="Orange" color="orange" defaultChecked />
		</PreviewPanel>
	)
}

API Reference

Checkbox

Checkbox with optional label, description, and responsive field layout.

Props

Name	Type	Default	Description
checkboxClassName	string	-	Additional classes applied to the checkbox control.
className	string	-	Classes for the checkbox control.
color	"default" \| "green" \| "red" \| "dark" \| "yellow" \| "orange" \| null \| undefined	-	Controls the checked checkbox color.
description	string	-	Helper text displayed below the label.
error	string \| null	-	Validation error message.
label	string	-	Checkbox label.
orientation	"vertical" \| "horizontal" \| "responsive" \| null	"horizontal"	Layout of the checkbox control and its text.

Dependencies

@base-ui/react class-variance-authority cn @cs/field @shadcn/checkbox @shadcn/field