edbnedbn/ui
ComponentsMapsAudioPDF
GitHub stars
Explorer
Get Started
Components

Checkbox

Accessible checkbox with indeterminate state support.

Componentsdocsbase-ui/checkbox

Installation

npx shadcn@latest add https://ui.edbn.me/r/checkbox.json

Manual

API Reference

Root

Represents the checkbox itself. Renders a span element and a hidden input beside.

namestring

Native input name

defaultCheckedboolean
=false

Initial checked state

checkedboolean

Controlled checked state

onCheckedChangefunction

Called when state changes

indeterminateboolean
=false

Indeterminate state

disabledboolean
=false

Disable checkbox

requiredboolean
=false

Required field

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Root data attributes
AttributeDescription
data-checkedPresent when checkbox is checked
data-uncheckedPresent when checkbox is not checked
data-disabledPresent when checkbox is disabled
data-requiredPresent when checkbox is required
data-indeterminatePresent when in indeterminate state

Indicator

Indicates whether the checkbox is ticked. Renders a span element.

keepMountedboolean
=false

Keep in DOM when unchecked

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Indicator data attributes
AttributeDescription
data-checkedPresent when checkbox is checked
data-uncheckedPresent when checkbox is not checked
data-disabledPresent when checkbox is disabled
data-indeterminatePresent when in indeterminate state
data-starting-stylePresent when animating in
data-ending-stylePresent when animating out