Switch Table of Contents

• Props
• Events
• Slots
• CSS Variables

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'
'left' 🚫
'right' 🚫
BreakpointCustomizable<SwitchAlignLabel>'end'checked checkedVisualize the switch with on/off status.booleanfalsecompact compactDisplays as compact version.booleanfalsedisabled disabledDisables the switch. No events will be triggered while disabled state is active.booleanfalsehideLabel 🛠hide-labelShow or hide label. For better accessibility it's 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>falsetheme themeAdapts the switch color depending on the theme.type Theme =
'light'
'dark'
'auto''light'EventsEventDescriptionTypeswitchChange 🚫deprecated since v3.0.0, will be removed with next major release, use update event instead. Emitted when checked status is changed.type SwitchUpdateEventDetail = {
  checked: boolean;
}
CustomEvent<SwitchUpdateEventDetail>update Emitted when checked status is changed.type SwitchUpdateEventDetail = {
  checked: boolean;
}
CustomEvent<SwitchUpdateEventDetail>SlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot> Default slot for the label.CSS VariablesCSS VariableDescriptiondefaultValue--p-hyphens Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.auto