Checkbox Ready

<duet-checkbox id="duet-checkbox_checked_checkbox" checked label="Checked" value="test"></duet-checkbox>

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

    // Listen for changes in the checkbox
    checkbox.addEventListener("duetChange", function (e) {
      console.log("Change detected in checkbox", e.detail)
    })
  })()
</script>

<duet-checkbox label="Unchecked"></duet-checkbox>

<duet-checkbox checked disabled label="Disabled"></duet-checkbox>

<duet-checkbox required label="I accept the conditions" error="This is mandatory selection"></duet-checkbox>

<script>
  const checkbox = document.querySelector("duet-checkbox");
  checkbox.addEventListener("change", () => {
    checkbox.error = checkbox.checked ? "" : "This is mandatory selection";
  });
</script>

<duet-fieldset label="Choose an option">
  <duet-checkbox checked label="Option 1"></duet-checkbox>
  <duet-checkbox label="Option 2"></duet-checkbox>
  <duet-checkbox label="Option 3"></duet-checkbox>
</duet-fieldset>

<duet-fieldset label="Choose an option">
  <duet-checkbox checked label="Option 1"></duet-checkbox>
  <duet-link url="https://www.duetds.com">Link text</duet-link>
  <duet-spacer size="x-large" direction="vertical"></duet-spacer>

  <duet-checkbox label="Option 2"></duet-checkbox>
  <duet-link url="https://www.duetds.com">Link text</duet-link>
  <duet-spacer size="x-large" direction="vertical"></duet-spacer>

  <duet-checkbox label="Option 3"></duet-checkbox>
  <duet-link url="https://www.duetds.com">Link text</duet-link>
  <duet-spacer size="x-large" direction="vertical"></duet-spacer>
</duet-fieldset>

<duet-fieldset label="Choose an option">
  <duet-grid responsive breakpoint="small">
    <duet-grid-item margin="none" fill>
      <duet-checkbox checked label="Option 1"></duet-checkbox>
    </duet-grid-item>
    <duet-grid-item margin="none" fill>
      <duet-checkbox label="Option 2"></duet-checkbox>
    </duet-grid-item>
    <duet-grid-item margin="none" fill>
      <duet-checkbox label="Option 3"></duet-checkbox>
    </duet-grid-item>
  </duet-grid>
</duet-fieldset>

<duet-grid direction="horizontal">
  <duet-grid-item margin="none">
    <duet-checkbox label="Olen tutustunut vakuutuksen ehtoihin,tuoteselosteeseen ja avaintietoihin" label-hidden>
    </duet-checkbox>
  </duet-grid-item>
  <duet-grid-item fill margin="none">
    <duet-paragraph margin="none">
      Olen tutustunut <duet-link url="#">vakuutuksen ehtoihin</duet-link>,
      <duet-link url="#">tuoteselosteeseen</duet-link> ja <duet-link url="#">avaintietoihin</duet-link>.
    </duet-paragraph>
  </duet-grid-item>
</duet-grid>

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

• label property is always required for accessible checkbox control.
• labelHidden property hides the above label visually, but still keeps it accessible for assistive technologies.
• You can use accessibleActiveDescendant property to indicates the id of a related component’s visually focused element.
• Use accessibleControls property to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.
• Use accessibleOwns property to indicate the id of a component owned by the checkbox.
• accessibleDescribedBy property can be used to indicate the id of a component which contains descriptive/help text related to the checkbox.
• disabled property makes the checkbox component disabled. This prevents users from being able to interact with the checkbox, and conveys its inactive state to assistive technologies.
• role property can be used to define a specific role attribute for the input.

Additional considerations #

• When you need to provide links inside the label, please follow the provided example to make sure these links stay accessible.