Skip to main content

Toggle
Ready

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

Examples

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

<script>
// Select the above toggle component
var toggle = document.querySelector("duet-toggle")

// Listen for change events in the toggle
toggle.addEventListener("duetChange", function(e) {
console.log("Change detected in toggle:", e.detail)
})
</script>
Open in new window
<duet-toggle label="Toggle" value="Some value"></duet-toggle>

Properties #

Property Attribute Description Type Default
accessibleActiveDescendant accessible-active-descendant Indicates the id of a related component’s visually focused element. string undefined
accessibleControls accessible-controls Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. string undefined
accessibleOwns accessible-owns Indicates the id of a component owned by the checkbox. string undefined
checked checked Check state of the checkbox. boolean false
identifier identifier Adds a unique identifier for the checkbox. string undefined
label label Label for the toggle. string "label"
margin margin Controls the margin of the component. "auto" | "none" "auto"
name name Name of the checkbox. string undefined
role role Defines a specific role attribute for the input. string undefined
theme theme Theme of the card. "" | "default" | "turva" ""
value value The value of the checkbox does not mean if it's checked or not, use the checked property for that. string undefined

Events #

Event Description Type
duetChange Emitted when the checked property has changed. CustomEvent<{ component: "duet-toggle"; checked: boolean; value: string; }>

Dependencies #

Depends on #

Graph #

graph TD;
duet-toggle --> duet-label
style duet-toggle fill:#f9f,stroke:#333,stroke-width:4px

Integration

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



Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes

Tutorials

Usage With Markdown


Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.