BwToggle | bw-toggle
Overview
The toggle component is a form control and represent if a value is true/false or on/off.
Usage
Sizes
<bw-toggle>Regular</bw-toggle>
<bw-toggle large>Large</bw-toggle>
Variants
<bw-toggle label-placement="start">Starting label</bw-toggle>
<bw-toggle label-placement="end">Ending label</bw-toggle>
<bw-toggle disabled>Disabled</bw-toggle>
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
disabled | disabled | Whether or not the toggle is disabled | boolean | false |
labelPlacement | label-placement | If the label should be placed at the start or end of the toggle | "end" | "start" | 'end' |
large | large | Size of the toggle | boolean | false |
originalValue | original-value | The default value the control will reset to in a form. If not set, will default to the inital value of the "value" property. | boolean | undefined |
value | value | Whether or not the toggle is active | boolean | false |
Events
| Event | Description | Type |
|---|---|---|
valueChange | Emits the new value whenever toggle is clicked | CustomEvent<boolean> |
Slots
| Slot | Description |
|---|---|
| The label of the toggle |
Shadow Parts
| Part | Description |
|---|---|
"toggle-thumb" | The thumb of the toggle |
"toggle-wrapper" | The wrapper of the toggle |
CSS Custom Properties
| Name | Description |
|---|---|
--active-background | Background color when checked |
--active-hover-background | Background color when active and hovered |
--disbaled-background | Background color when disabled |
--inactive-background | Background color when not checked |
--thumb-gutter | Gutter between the thumb and the wrapper |
--thumb-size | Size of the thumb |
--thumb-wrapper-height | Height of the thumb wrapper |
--thumb-wrapper-width | Width of the thumb wrapper |
© 2025 United Systems & Software - All Rights Reserved.