Get help Color blind mode Low vision mode

Autocomplete New

This template shows how to correctly use duet-input's autoComplete property so that browsers and password managers can autofill a form's fields. Please note that the example below does not represent a real use case.

The autoComplete property is exposed on the HTML element as the attribute auto-complete, not autocomplete. Stencil turns a camelCase property name into a hyphenated attribute name, so writing autocomplete="email" directly on <duet-input> does nothing, it is just an unrelated custom attribute on the host element. Use auto-complete="email" instead, duet-input forwards the value to the native autocomplete attribute on the input it renders.

The value itself must be one (or a space separated sequence) of the exact tokens defined by the WHATWG autofill specification, in this order: an optional section-* token, an optional shipping or billing token, an optional contact type such as home, work or mobile, and finally the field name itself (for example shipping address-line1 or mobile tel). Free text such as "postinumero" or a token in the wrong order is silently ignored by browsers.

Known limitation: when type="password", duet-input always renders autocomplete="off" on the underlying input regardless of the auto-complete property, so tokens like new-password or current-password currently have no effect on password fields. See MDN's autocomplete reference for the full list of available tokens, including ones not shown in this example such as organization, bday and one-time-code.

Hint: Press F on your keyboard to view both templates and components in fullscreen and ESC to exit the fullscreen mode. You can also open the template in a new browser window.


Open in new window 
<!DOCTYPE html>
<html class="duet-bg-gradient duet-sticky-footer" lang="fi">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>LähiTapiola</title>
  <link rel="stylesheet" href="https://cdn.duetds.com/api/fonts/3.0.67/lib/localtapiola.css" integrity="sha384-5JYmtSD7nykpUvSmTW1CHMoBDkBZUpUmG0vuh+NUVtZag3F75Kr7+/JU3J7JV6Wq" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.duetds.com/api/css/5.1.2/lib/duet.min.css" integrity="sha384-8a3k6EMTXdSR8KbVtxSURb5pHVMmxP4aKXg9NB3lrW2UsK1sNWRY8BUc2VvnWK4d" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.duetds.com/api/tokens/5.1.2/lib/tokens.custom-properties.css" integrity="sha384-CLtvX3Hm5cg7+ALJG+wzT72Bmxt2YN1piNjcK8ILizklnRCExM6i3lvmYJKW4At4" crossorigin="anonymous" />
  <script type="module" src="https://cdn.duetds.com/api/components/10.5.0/lib/duet/duet.esm.js" integrity="sha384-d0wtQY1lfTG6894ByalJc6AM4WSseGcaM8DvF4+EbAsQJEuQ++a2jWwgVejCyLqK" crossorigin="anonymous"></script>
</head>
<body>
<duet-header language="fi"></duet-header>
<duet-layout center>
  <div slot="main">
    <duet-card padding="large">
      <duet-spacer breakpoint="x-small" size="medium"></duet-spacer>

      <form id="checkout-form" action="#" method="post" novalidate>

        <duet-heading level="h1" visual-level="h2">Tilauksen tiedot</duet-heading>
        <duet-paragraph>
          Tämä lomake näyttää, miten <code>duet-input</code>-komponentin <code>autoComplete</code>-ominaisuutta
          käytetään oikein, jotta selain ja salasanahallinta osaavat täydentää kentät automaattisesti.
        </duet-paragraph>

        <!--
          IMPORTANT: duet-input exposes the `autoComplete` property as the HTML attribute `auto-complete`
          (Stencil lowercases and hyphenates camelCase props). Writing `autocomplete="..."` directly on
          <duet-input> has no effect, it just renders as an unrelated custom attribute on the host element.
          The component forwards the value to the native `autocomplete` attribute on the inner <input> for you.
        -->

        <duet-spacer size="medium"></duet-spacer>
        <duet-heading level="h2" visual-level="h4">Yhteystiedot</duet-heading>

        <duet-grid responsive alignment="form-distribute">
          <!-- Plain field names with no "shipping"/"billing"/"section-*" prefix describe the person themselves -->
          <duet-input label="Etunimi" name="given-name" auto-complete="given-name" required expand></duet-input>
          <duet-input label="Sukunimi" name="family-name" auto-complete="family-name" required expand></duet-input>
        </duet-grid>
        <duet-grid responsive alignment="form-distribute">
          <duet-input
            label="Sähköposti"
            name="email"
            type="email"
            auto-complete="email"
            required
            expand
          ></duet-input>
          <!-- The "mobile" hint before "tel" tells the browser which of several stored numbers to suggest -->
          <duet-phone-input
            label="Puhelinnumero"
            name="tel"
            type="tel"
            auto-complete="mobile tel"
            required
            expand
          ></duet-phone-input>
        </duet-grid>

        <duet-divider></duet-divider>
        <duet-heading level="h2" visual-level="h4">Toimitusosoite</duet-heading>

        <!--
          Every field in this section is prefixed with the "shipping" token. This is what lets a browser
          store separate shipping and billing addresses and still autofill the right one into the right field,
          even though the field names themselves (address-line1, postal-code, ...) are identical between them.
        -->
        <duet-input
          label="Katuosoite"
          name="shipping-address-line1"
          auto-complete="shipping address-line1"
          required
          expand
        ></duet-input>
        <duet-input
          label="Osoiterivi 2 (valinnainen)"
          name="shipping-address-line2"
          auto-complete="shipping address-line2"
          expand
        ></duet-input>
        <duet-grid responsive aligment="form-distribute">
          <duet-input
            label="Postinumero"
            name="shipping-postal-code"
            auto-complete="shipping postal-code"
            required
            expand
          ></duet-input>
          <duet-input
            label="Kaupunki"
            name="shipping-address-level2"
            auto-complete="shipping address-level2"
            required
            expand
          ></duet-input>
        </duet-grid>
        <duet-input
          label="Maa"
          name="shipping-country-name"
          auto-complete="shipping country-name"
          required
          expand
        ></duet-input>

        <duet-divider></duet-divider>
        <duet-heading level="h2" visual-level="h4">Laskutusosoite</duet-heading>

        <duet-toggle
          name="billing-same-as-shipping"
          label="Laskutusosoite on sama kuin toimitusosoite"
          checked
        ></duet-toggle>

        <div id="billing-fields" hidden>
          <duet-spacer size="medium"></duet-spacer>
          <!-- Same field names as above, this time prefixed with "billing" instead of "shipping" -->
          <duet-input
            label="Katuosoite"
            name="billing-address-line1"
            auto-complete="billing address-line1"
            expand
          ></duet-input>
          <duet-input
            label="Osoiterivi 2 (valinnainen)"
            name="billing-address-line2"
            auto-complete="billing address-line2"
            expand
          ></duet-input>
          <duet-grid responsive aligment="form-distribute">
            <duet-input
              label="Postinumero"
              name="billing-postal-code"
              auto-complete="billing postal-code"
              expand
            ></duet-input>
            <duet-input
              label="Kaupunki"
              name="billing-address-level2"
              auto-complete="billing address-level2"
              expand
            ></duet-input>
          </duet-grid>
          <duet-input
            label="Maa"
            name="billing-country-name"
            auto-complete="billing country-name"
            expand
          ></duet-input>
        </div>

        <duet-divider></duet-divider>
        <duet-heading level="h2" visual-level="h4">Maksutiedot</duet-heading>

        <duet-input
          label="Kortinhaltijan nimi"
          name="cc-name"
          auto-complete="cc-name"
          required
          expand
        ></duet-input>
        <!--
          Card number, expiry and security code intentionally use type="text", not type="number". Card
          numbers can contain spaces and leading zeros that a numeric input would mangle, and the autofill
          values a browser fills in are strings, not numbers.
        -->
        <duet-input
          label="Korttinumero"
          name="cc-number"
          auto-complete="cc-number"
          required
          expand
        ></duet-input>
        <duet-grid responsive aligment="form-distribute">
          <duet-input
            label="Voimassaolo (KK/VV)"
            name="cc-exp"
            auto-complete="cc-exp"
            required
            expand
          ></duet-input>
          <duet-input
            label="Turvakoodi"
            name="cc-csc"
            auto-complete="cc-csc"
            required
            expand
          ></duet-input>
        </duet-grid>

        <duet-spacer size="x-large"></duet-spacer>

        <duet-grid responsive row-reverse>
          <duet-grid-item><duet-button submit variation="primary">Vahvista tilaus</duet-button></duet-grid-item>
          <duet-grid-item><duet-button>Keskeytä</duet-button></duet-grid-item>
        </duet-grid>

      </form>
    </duet-card>
  </div>
</duet-layout>
<duet-footer logo-href="#" language="fi"></duet-footer>

<script>
  const billingToggle = document.querySelector('duet-toggle[name="billing-same-as-shipping"]')
  const billingFields = document.querySelector("#billing-fields")

  billingToggle.addEventListener("duetChange", function (event) {
    billingFields.hidden = event.detail.checked
  })
</script>
</body>
</html>

Integration

To install this template’s dependencies into your project, run:

npm install @duetds/components
npm install @duetds/css
npm install @duetds/fonts

For further guidelines, please see each package’s documentation.


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 template, please head over to the Support page for more guidelines and help.