Checkbox

Checkbox input with checked, unchecked, and indeterminate states.

Demo

Checked option

Unchecked option

Indeterminate state

Disabled option

Usage

// Create a signal for state
let checked = @resource.signal(false)

// Reactive checkbox
@styled_checkbox.checkbox(
  checked,
  [@luna.text("Accept terms and conditions")],
)

Props

Prop	Type	Default	Description
checked	Signal[Bool]	-	Reactive state signal
disabled	Bool	false	Disable the checkbox
indeterminate	Bool	false	Mixed/partial state
id	String?	auto	Input element ID
name	String?	auto	Form field name
class	String?	None	Additional CSS class
children	Array[Node]	-	Label content

BEM Classes

Class	Description
`.checkbox`	Root wrapper
`.checkbox__input`	Hidden native input
`.checkbox__control`	Visual checkbox box
`.checkbox__icon`	Check/minus icon
`.checkbox__label`	Label text
`.checkbox-group`	Container for multiple checkboxes

States

State	Description
`data-checked="true"`	Checked state
`data-checked="false"`	Unchecked state
`data-indeterminate="true"`	Mixed/partial state
`data-disabled`	Disabled state

Accessibility

Native <input type="checkbox"> for form integration
aria-checked reflects current state (true, false, mixed)
Space toggles state
Focus ring on keyboard navigation
Clicking label toggles checkbox