Checkbox

Controlled or uncontrolled checkbox with optional label.

Installation

npx dafink-ui add checkbox

Demo

Accept termsCheckedDisabled

Props

Name	Type	Default	Description
label	string	undefined	Text label rendered next to the checkbox.
id	string	undefined	HTML id, links label to input.
checked	boolean	undefined	Controlled checked state.
disabled	boolean	false	Disables the checkbox.
onChange	ChangeEventHandler<HTMLInputElement>	undefined	Change event handler.

Accessibility

Checkbox renders a native <input type="checkbox"> wrapped in a <label>, so the entire label row is a click target: native Tab order, no roving tabindex. Space toggles it via native semantics; Enter is the one piece of custom handling Checkbox adds on top — a native checkbox only responds to Space in every browser, which reads as broken next to a button or link that responds to both, so Checkbox's own onKeyDown makes Enter toggle it too (a consumer's own onKeyDown still runs first and can call preventDefault() to suppress it). When an explicit id is passed it's also linked via htmlFor. Checkbox does not set aria-invalid itself; error state is left to a wrapping FormField/FormMessage.

Key	Function
`tab`	Focuses the checkbox, or the whole label row if it wraps one — native tab order, no roving tabindex.
`space`	Toggles the checkbox. Native browser behavior, not something Checkbox adds.
`enter`	Also toggles the checkbox, matching Space. This is Checkbox’s own addition: a native checkbox otherwise ignores Enter entirely.