Switch
Switches allow the user to toggle an option on or off.
val checked = Var(true)Switch( _.checked <-- checked, _.onInput.mapToChecked --> checked)("Switch")This component works with standard <form> elements. Please refer to the section on form controls to learn more about form submission and client-side validation.
Examples
Checked
Use the checked attribute to activate the switch.
Switch(_.checked := true)("Switch")Disabled
Use the disabled attribute to disable the switch.
Switch(_.disabled := true)("Switch")Sizes
Use the size attribute to change a switch's size.
Switch(_.size.small)("Switch")Switch(_.size.medium)("Switch")Switch(_.size.large)("Switch")Hint
Add descriptive hint to a switch with the hint attribute. For hints that contain HTML, use the hint slot instead.
Switch(_.hint := "What should the user know about the switch?")("Switch")Custom Styles
Use the available custom properties to change how the switch is styled.
Switch( _.style := "--width: 80px; --height: 40px; --thumb-size: 36px;")("Really big")