AXA Toggle Switch
<axa-toggle-switch> provides a UI element for toggling between two states, active and inactive. You can use it in React controlled components.
Properties
checked
The Boolean attribute checked sets the visual state of the toggle switch to active, if true, and inactive otherwise.
If checked is defined when first set under React, controlled-component mode is activated.
disabled
The Boolean attribute disabled, when true, disables the toggle switch natively.
error
The string attribute error sets an error text. Leave error empty, if you do not want an error text.
onToggle
The function-valued attribute onToggle can be used as a callback prop for React and other frameworks.
The callback prop value has the following Typescript signature:
onToggle?: (checked: boolean) => void;Events
Both a change event and a Custom Event are fired on the component itself. The events bubble and are cancellable. The Custom Event axa-toggle-switch-toggle's detail property contains {checked: boolean}, where the meaning of checked is as defined above for the same-named property.