# Checkbox

Level: atom.

## Purpose and use

Select independent items, including multiple rows. Use `intermediate` for a partially selected aggregate; use Radio for an exclusive option and Switch for an on/off setting.

## Anatomy and behavior

A native checkbox is wrapped by its label, with optional description and decorative hint icon. `selectedChange` proposes the new boolean; the parent updates `selected` and clears or recomputes `intermediate`. Intermediate takes precedence visually and sets the native indeterminate property. Disabled blocks changes; error marks the input invalid.

## Accessibility and content

The wrapping label supports pointer activation and native Space activation. Hidden text uses `label` as aria-label. Mixed state is announced through `aria-checked='mixed'`; visible description is linked with aria-describedby. Hint is decorative and does not implement a help popup.

## Local component contract

This is the current owned contract for `component.checkbox`. Behavior above was checked
against the local implementation, template and focused tests listed below.
Historical migration evidence does not override these current sources.

### Public type values

`WblCheckboxSize`: `S | M`. `selected`, `intermediate`, `disabled`, `error`, `text`, `description`, and `hint` are booleans; `selectedChange` emits a boolean.

### Classes and selectors

- `WblCheckboxComponent` — `wbl-checkbox` (src/app/design-system/primitives/checkbox/checkbox.component.ts).

### Inputs

- `WblCheckboxComponent.size = input<WblCheckboxSize>('M')`
- `WblCheckboxComponent.selected = input(false)`
- `WblCheckboxComponent.intermediate = input(false)`
- `WblCheckboxComponent.disabled = input(false)`
- `WblCheckboxComponent.error = input(false)`
- `WblCheckboxComponent.text = input(true)`
- `WblCheckboxComponent.label = input('Label')`
- `WblCheckboxComponent.description = input(false)`
- `WblCheckboxComponent.descriptionText = input('Desc')`
- `WblCheckboxComponent.hint = input(false)`

### Models

- None.

### Outputs

- `WblCheckboxComponent.selectedChange = output<boolean>()`

### Slots and projection markers

- The exact template has no Angular content-projection slot.

### Local evidence

- Behavior/template: `src/app/design-system/primitives/checkbox/checkbox.component.html` (reviewed in D-025, 2026-09-05).

- Code: `src/app/design-system/primitives/checkbox/checkbox.component.ts`.
- Focused test: `src/app/design-system/primitives/checkbox/checkbox.component.spec.ts`.
- Public export: `export * from './primitives/checkbox/checkbox.component';` in `src/app/design-system/index.ts`.
- Storybook: `storybook/stories/checkbox.stories.ts` (`Design System/Primitives/wbl-checkbox`).

## Figma status

This runtime contract does not infer a Figma owner. Assembly evidence, when
verified, is maintained separately through the inventory-linked sidecar.

## Provenance

The archived source-document copy is historical evidence only. The active
resolver is local code/test/export and the exact Storybook story above.