Diwa Design System

Switch

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

Properties

NameTypeDefaultDescription
checkedbooleanfalseWhether the switch is in the on state. The host app must update this prop in response to the update event.
disabledbooleanfalseDisables interaction. No events fire while disabled.
loadingbooleanfalseShows a loading indicator and disables interaction. Use while an async operation is in progress.
alignLabel'start' | 'end''end'Position of the label relative to the track.
compactbooleanfalseEnables dense mode. Reduces track and thumb size for dense or space-constrained layouts.
theme'dark' | 'light''dark'Per-component theme override.

Events

NameDetail typeBubblesDescription
update{ checked: boolean }NoEmitted when the user toggles the switch. Update the checked prop in response.

Slots

SlotDescription
defaultLabel text displayed next to the track.