Holo Checkbox

The <holo-checkbox> component is a form-associated checkbox that supports checked, indeterminate, and disabled states.

When to use

Use it for:

• Letting users select zero or more options from a list, or opt in to a single setting (“Remember me”).
• Showing a mixed state for a parent of partly selected children (indeterminate).

Don’t use it for:

• Choosing exactly one option from a set. Use Radio.
• Settings that take effect immediately. Use Switch.
• An action. Use Button.

Live Previews

Unchecked / Checked

<holo-checkbox label="Accept terms"></holo-checkbox> <holo-checkbox label="Accept terms" checked></holo-checkbox>

Indeterminate

<holo-checkbox label="Select all" indeterminate></holo-checkbox>

Disabled

<holo-checkbox label="Accept terms" disabled></holo-checkbox>

Accessibility

The component renders a native <input type="checkbox"> inside a <label>, so the role, state and name come from the browser. The visual box is aria-hidden. The label prop is the accessible name. required and disabled are applied to the native input, indeterminate sets the native indeterminate property, and the component is form-associated through ElementInternals (its value is submitted only while checked).

Key	Action
Tab	Moves focus to or from the checkbox
Space	Toggles the checkbox

• The focus ring is drawn on the visual box when the native input matches :focus-visible.
• When required and unchecked, the form reports a validity error (“This field is required.”) anchored to the input.
• Clicking the label text toggles the checkbox.

You provide:

• A label. There is no other way to name the checkbox, so an unlabelled one has no accessible name.
• Visible error text if you validate beyond required.
• A group label (for example a <fieldset> with a <legend>) around related checkboxes.

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-checkbox';

Properties

Property	Attribute	Type	Default	Description
checked	checked	boolean	false	Whether the checkbox is checked.
disabled	disabled	boolean	false	If true, the checkbox is disabled and non-interactive.
indeterminate	indeterminate	boolean	false	Puts the checkbox in an indeterminate visual state (does not affect the submitted form value).
label	label	string	—	The visible label text for the checkbox.
name	name	string	—	The form field name submitted with the owning form.
required	required	boolean	false	If true, the owning form cannot submit unless the checkbox is checked.
value	value	string	'on'	The form value submitted when the checkbox is checked.

Events

Event	Detail	Description
holoChange	boolean	Emitted when the checked state changes.

CSS custom properties

Property	Description
--holo-checkbox-bg	Background color of the unchecked box.
--holo-checkbox-border-color	Border color of the unchecked box.
--holo-checkbox-check-color	Color of the check mark and indeterminate bar.
--holo-checkbox-checked-bg	Fill and border color of the checked or indeterminate box.
--holo-checkbox-radius	Corner radius of the box.
--holo-checkbox-text-color	Text color of the label.