Level: atom.
Purpose and use
Toggle a binary setting. Use Checkbox for selecting records or an option that is applied later by a separate submission action.
Anatomy and behavior
A native checkbox with role='switch' renders the track, thumb and optional label/description/hint. selectedChange emits the requested boolean; the parent owns selected and any save operation. Disabled prevents editing. There is no loading or error API.
Accessibility and content
Use a stable label naming the setting rather than changing the label with its value. Native Space interaction toggles the control. aria-checked follows selected; hidden text falls back to label and visible description is associated with the input. The hint icon is decorative.
Local component contract
This is the current owned contract for component.switch. 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
WblSwitchSize: S | M. selected, disabled, text, description, and hint are booleans; selectedChange emits a boolean.
Classes and selectors
WblSwitchComponent—wbl-switch(src/app/design-system/primitives/switch/switch.component.ts).
Inputs
WblSwitchComponent.size = input<WblSwitchSize>('M')WblSwitchComponent.selected = input(false)WblSwitchComponent.disabled = input(false)WblSwitchComponent.text = input(true)WblSwitchComponent.label = input('Label')WblSwitchComponent.description = input(false)WblSwitchComponent.descriptionText = input('Desc')WblSwitchComponent.hint = input(false)
Models
- None.
Outputs
WblSwitchComponent.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/switch/switch.component.html(reviewed in D-025, 2026-09-05).Code:
src/app/design-system/primitives/switch/switch.component.ts.Focused test:
src/app/design-system/primitives/switch/switch.component.spec.ts.Public export:
export * from './primitives/switch/switch.component';insrc/app/design-system/index.ts.Storybook:
storybook/stories/switch.stories.ts(Design System/Primitives/wbl-switch).
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.