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 |