Skip to main content Skip to navigation Skip to search

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