Switch Table of Contents

• Props
• Events
• Slots

Propertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultalignLabel 🛠align-labelAligns the label.type SwitchAlignLabel =
'start'
'end'
BreakpointCustomizable<SwitchAlignLabel>'end'checked checkedVisualize the switch with on/off status.booleanfalsecompact compactDisplays the switch in compact mode.booleanfalsedisabled disabledDisables the switch. No events will be triggered while disabled state is active.booleanfalsehideLabel 🛠hide-labelShows or hides the label. For better accessibility, it is recommended to show the label.boolean
BreakpointCustomizable<boolean>falseloading loadingDisables the switch and shows a loading indicator. No events will be triggered while loading state is active.booleanfalsestretch 🛠stretchStretches the contents to max available space.boolean
BreakpointCustomizable<boolean>falseEventsEventDescriptionTypeupdate Emitted when the checked state changes.type SwitchUpdateEventDetail = {
  checked: boolean;
}
CustomEvent<SwitchUpdateEventDetail>SlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot> Default slot for the label.