Switch
A toggle control that lets users turn an option on or off immediately without requiring form submission.
When to use
Do
- ✓Use a switch for settings that take effect immediately — there is no confirmation step.
- ✓Label the switch clearly so the user knows what changes when they toggle it.
- ✓Use the loading state when the toggle triggers an async operation (e.g. an API call).
- ✓Use alignLabel="start" in forms that follow a right-to-left label pattern.
- ✓Group related switches in a logical section with a heading.
Don't
- ✕Don't use a switch for binary choices that require confirmation before taking effect — use a checkbox with a submit button instead.
- ✕Don't use a switch to represent selection within a list — use a checkbox or radio group.
- ✕Don't place a switch inside a form that has a Save button — the user expects the toggle to act immediately.
- ✕Don't remove the label — every switch must have a visible text label or an accessible aria-label.
- ✕Don't nest switches inside other interactive controls.
Controlled usage
diwa-switch is a controlled component. The checked prop reflects the current state, and the component emits an update event with a { checked: boolean } detail. Your application must update the prop in response.
This pattern ensures the switch always reflects the application's true state and prevents out-of-sync UI when async operations fail.