The <luna-checkbox> component provides accessible checkbox inputs with support for checked, indeterminate, and disabled states.
Paths
/lunadom/components/checkbox/checkbox.js REQUIRED
Example
Subscribe to newsletter
Standard States
Subscribe to newsletter
Accept terms and conditions
Select all projects
Disabled setting
Sizes
Small Checkbox
Medium Checkbox
Large Checkbox
Customization
Slots
default - Label content for the checkbox
Attributes
checked - Whether the checkbox is checked
indeterminate - Whether the checkbox is in indeterminate state
disabled - Whether the checkbox is disabled
size="md" - Size of the checkbox (sm, md, lg)
CSS Variables
--luna-checkbox-color - Checkbox accent color
Example Code
<!-- States -->
<luna-checkbox checked>Subscribe to newsletter</luna-checkbox>
<luna-checkbox>Accept terms</luna-checkbox>
<luna-checkbox indeterminate>Select all</luna-checkbox>
<luna-checkbox disabled>Disabled</luna-checkbox>
<!-- Sizes -->
<luna-checkbox size="sm">Small</luna-checkbox>
<luna-checkbox size="md">Medium</luna-checkbox>
<luna-checkbox size="lg">Large</luna-checkbox>