@gospore/checkbox

The Checkbox component wraps a native <input type="checkbox"> inside a styled label. It supports controlled boolean state as well as checkbox groups driven by an array value.

Group values may be strings or objects. Object values are matched by identity for both pointer and Enter-key activation, so reuse the same object instance in the bound array when it represents the same option.

Any additional attributes (e.g., name, aria-describedby, required) are forwarded to the hidden input element.

Slots & events

• Default slot: overrides the rendered label area (useful for inline links).
• Events: The component emits update:checked for v-model. Native click and keyup events are forwarded so forms can listen for key interactions. Pressing Enter while the checkbox is focused toggles it automatically.

Accessibility

• The <label> wraps the input, so clicking text or pressing Space/Enter toggles the checkbox just like a native control.
• Focus styles use the shared token --color-border-focused-* to maintain WCAG contrast in light and dark mode.
• The checkmark icon is marked aria-hidden="true"; screen readers rely on the native input state and label text, keeping announcements accurate.

Skeletons

This package also exports CheckboxSkeleton for async loading states. Import the owning package CSS plus @gospore/skeleton/skeleton.css so the shared skeleton primitive styles and tokens are available. Skeletons are decorative by default; put aria-busy, role="status", or loading copy on the surrounding region when assistive technology needs an explicit loading announcement.