# Switch

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';` in `src/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.