Checkbox Pro

A switchable element to mark an option as checked or unchecked.

Star our GitHub repo to support ScrollX UI

Ahdeetai thinks this checkbox is legendary

Cooler than a perfectly timed plot twist.

Doubt the process if you dare

Use ScrollX UI for your next project

Build modern, animated interfaces faster with clean and reusable components.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/checkbox-pro.json

import { Checkbox } from "@/components/ui/checkbox"

<Checkbox />

A switchable element to mark an option as checked or unchecked.

Property	Type	Default	Description
`asChild`	boolean	`false`	Render custom child. Used in CheckboxPro & Indicator.
`defaultChecked`	boolean \| 'indeterminate'	`false`	Initial state. CheckboxPro only.
`checked`	boolean \| 'indeterminate'	`—`	Controlled state. CheckboxPro & Indicator.
`onCheckedChange`	function	`—`	State change callback. CheckboxPro only.
`disabled`	boolean	`false`	Disable interaction. CheckboxPro & Indicator.
`required`	boolean	`false`	Required for forms. CheckboxPro only.
`name`	string	`—`	Form name. CheckboxPro only.
`value`	string	`—`	Form value. CheckboxPro only.
`id`	string	`—`	Element ID. CheckboxPro only.
`className`	string	`—`	Custom styles. CheckboxPro & Indicator.
`aria-label`	string	`—`	Accessibility. CheckboxPro only.
`labelledby`	string	`—`	Accessibility. CheckboxPro only.
`describedby`	string	`—`	Accessibility. CheckboxPro only.
`forceMount`	boolean	`—`	Always show indicator. Indicator only.
`children`	ReactNode	`—`	Custom content when asChild is true. Both components.