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';insrc/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.