Switch

A toggle control that lets users turn an option on or off immediately without requiring form submission.

Keyboard interaction

Key	Action
`Tab`	Moves focus to the switch track.
`Space / Enter`	Toggles the checked state and emits the update event.

Screen reader behaviour

Attribute / Property	Value / Behaviour
`role="switch"`	Applied to the inner track element. Communicates the toggle semantics to screen readers.
`aria-checked`	Reflects the current checked state ("true" or "false").
`aria-disabled`	Set to "true" when disabled or loading, preventing keyboard interaction.

WCAG 2.2 compliance

✓

1.4.3 Contrast (Minimum) — AAPass

Label text uses --diwa-text-primary; meets the 4.5:1 minimum contrast ratio against the component background in both themes.

✓

1.4.11 Non-text Contrast — AAPass

The switch track border (--diwa-border) and indicator meet ≥ 3:1 contrast against adjacent surface colours.

✓

2.1.1 Keyboard — APass

The switch track is reachable by Tab and togglable with Space or Enter.

✓

2.4.7 Focus Visible — AAPass

A tokenized focus outline (var(--diwa-focus-ring-width) solid --diwa-border-focus) is shown on the inner track via :focus-visible when navigating by keyboard.

✓

4.1.2 Name, Role, Value — APass

role="switch" and aria-checked reflecting the current state are managed automatically. aria-disabled is set for disabled and loading states.

Best practices

Always provide a label — the slotted text is the accessible name. If no text is slotted, add an aria-label on the host element.
Immediate effect — announce state changes to screen readers by ensuring the checked prop is updated promptly after the update event fires.
Loading state — when loading is true, aria-disabled is set and tabIndex is -1, removing the element from the focus order.