Skip to main content
LocalTapiola Turva

Toggle ready

Toggles are graphical interface switches that give user control over a feature or option that can be turned on or off.


Open in new window
<duet-label for="toggle">Checked toggle</duet-label>
<duet-toggle identifier="toggle" value="Some value" checked></duet-toggle>

  var toggle = document.querySelector("duet-toggle")
  toggle.addEventListener("duetChange", function(e) {
    console.log("Change detected in toggle", e)
Open in new window
<duet-label for="toggle2">Toggle</duet-label>
<duet-toggle identifier="toggle2" value="Some value"></duet-toggle>

Properties #

accessibleActiveDescendantaccessible-active-descendantIndicates the id of a related component’s visually focused element.stringundefined
accessibleControlsaccessible-controlsUse this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.stringundefined
accessibleOwnsaccessible-ownsIndicates the id of a component owned by the checkbox.stringundefined
checkedcheckedCheck state of the checkbox.booleanfalse
identifieridentifierAdds a unique identifier for the checkbox.stringundefined
marginmarginControls the margin of the component. Can be one of: "auto", "none".string"auto"
namenameName of the checkbox.stringundefined
roleroleDefines a specific role attribute for the input.stringundefined
themethemeTheme of the card. Can be one of: "default", "turva".string""
valuevalueThe value of the checkbox does not mean if it's checked or not, use the checked property for that.stringundefined

Events #

duetChangeEmitted when the checked property has changed.CustomEvent<any>


For integration, events and theming guidelines, please see Using Components. That page explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.