Skip to main content
LocalTapiola Turva

Checkbox ready

Checkboxes are used to let a user choose one or more options from a limited number of options.

Examples

Open in new window
<duet-checkbox checked label="Checked"></duet-checkbox>

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

  // Listen for changes in the checkbox
  checkbox.addEventListener("duetChange", function(e) {
    console.log("Change detected in checkbox", e)
  })
</script>
Open in new window
<duet-checkbox label="Unchecked"></duet-checkbox>
Open in new window
<duet-checkbox checked disabled label="Disabled"></duet-checkbox>
Open in new window
<duet-checkbox checked label="Option 1"></duet-checkbox>
<duet-checkbox label="Option 2"></duet-checkbox>
<duet-checkbox label="Option 3"></duet-checkbox>

Properties #

PropertyAttributeDescriptionTypeDefault
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
disableddisabledMakes the checkbox component disabled. This prevents users from being able to interact with the checkbox, and conveys its inactive state to assistive technologies.booleanfalse
identifieridentifierAdds a unique identifier for the checkbox.stringundefined
labellabelLabel for the checkboxstring"label"
marginmarginControls the margin of the component. Can be one of: "auto", "none".string"auto"
namenameName of the checkbox.stringundefined
requiredrequiredSet whether the input is required or not.booleanfalse
roleroleDefines a specific role attribute for the input.stringundefined
themethemeTheme of the checkbox. 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 #

EventDescriptionType
duetBlurEmitted when the checkbox loses focus.CustomEvent<any>
duetChangeEmitted when the checked property has changed.CustomEvent<any>
duetFocusEmitted when the checkbox has focus.CustomEvent<any>

Methods #

setFocus() => Promise<void> #

Sets focus on the specified duet-checkbox. Use this method instead of the global
input.focus().

Returns #

Type: Promise<void>


Integration

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.