Toggle
Toggle
Toggle Properties
| Name | Type | Description |
|---|---|---|
| cdsMotion | string | |
| controlAlign | 'left' | 'right' | Align the labels of controls within group left or right |
| status | neutral | error | success | Set the status of form control validation |
| controlWidth | stretch | shrink | Adjust the control from the default full width or the browser default width |
| validate | boolean | Set the validate attribute to sync with HTML5 native validation https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation |
| responsive | boolean | By default forms will collapse to layout that prevents overflow. If disabled control layout may break or overflow in unexpected ways. |
| layout | vertical | horizontal | compact | Set to adjust the default control layout. When `responsive` is true this will be the largest size to scale to. |
| layoutChange | EventEmitter<ControlLayout> |
Toggle CSS Properties
| Name |
|---|
| --background |
| --border |
| --border-radius |
| --height |
| --width |
| --anchor-background |
| --anchor-border-radius |
| --anchor-width |
| --anchor-height |
| --toggle-speed |
Toggle Slots
| Name | Description |
|---|---|
| For projecting checkbox |
Toggle Group
Toggle Group Properties
| Name | Type | Description |
|---|---|---|
| status | neutral | error | success | Set the status of control group validation |
| layout | horizontal | horizontal | -inline | vertical | vertical-inline | compact} |
| controlAlign | 'left' | 'right' | Align the labels of controls within group left or right |
| disabled | boolean | Disable all controls within a control group or omit and disable controls individually |
| controlWidth | stretch | shrink | Adjust the control from the default full width or the browser default width |
| responsive | boolean | By default forms will collapse to layout that prevents overflow. If disabled control layout may break or overflow in unexpected ways. |
| layoutStable |
Toggle Group Slots
| Name | Description |
|---|---|
| For projecting toggle controls |