Password input

Password input

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
  <label class="govuk-label" for="password">
    Password
  </label>
  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    <input class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password" name="password" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
    <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password" aria-label="Show password" hidden>
      Show
    </button>
  </div>
</div>

Macro

{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  label: {
    text: "Password"
  },
  name: "password"
}) }}

Password input with hint text

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
  <label class="govuk-label" for="password-input-with-hint-text">
    Password
  </label>
  <div id="password-input-with-hint-text-hint" class="govuk-hint">
    It probably has some letters, numbers and maybe even some symbols in it.
  </div>
  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    <input class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password-input-with-hint-text" name="test-name-2" type="password" spellcheck="false" aria-describedby="password-input-with-hint-text-hint" autocomplete="current-password" autocapitalize="none">
    <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password-input-with-hint-text" aria-label="Show password" hidden>
      Show
    </button>
  </div>
</div>

Macro

{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  label: {
    text: "Password"
  },
  hint: {
    text: "It probably has some letters, numbers and maybe even some symbols in it."
  },
  id: "password-input-with-hint-text",
  name: "test-name-2"
}) }}

Password input with error message

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-form-group--error govuk-password-input" data-module="govuk-password-input">
  <label class="govuk-label" for="password-input-with-error-message">
    Password
  </label>
  <div id="password-input-with-error-message-hint" class="govuk-hint">
    It probably has some letters, numbers and maybe even some symbols in it.
  </div>
  <p id="password-input-with-error-message-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </p>
  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    <input class="govuk-input govuk-password-input__input govuk-js-password-input-input govuk-input--error" id="password-input-with-error-message" name="test-name-3" type="password" spellcheck="false" aria-describedby="password-input-with-error-message-hint password-input-with-error-message-error" autocomplete="current-password" autocapitalize="none">
    <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password-input-with-error-message" aria-label="Show password" hidden>
      Show
    </button>
  </div>
</div>

Macro

{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  label: {
    text: "Password"
  },
  hint: {
    text: "It probably has some letters, numbers and maybe even some symbols in it."
  },
  id: "password-input-with-error-message",
  name: "test-name-3",
  errorMessage: {
    text: "Error message goes here"
  }
}) }}

Password input with label as page heading

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="password-input-with-page-heading">
      Password
    </label>
  </h1>
  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    <input class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password-input-with-page-heading" name="test-name" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
    <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password-input-with-page-heading" aria-label="Show password" hidden>
      Show
    </button>
  </div>
</div>

Macro

{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  label: {
    text: "Password",
    classes: "govuk-label--l",
    isPageHeading: true
  },
  id: "password-input-with-page-heading",
  name: "test-name"
}) }}

Password input with input width class

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
  <label class="govuk-label" for="password-input-width">
    Password
  </label>
  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    <input class="govuk-input govuk-password-input__input govuk-js-password-input-input govuk-input--width-10" id="password-input-width" name="password" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
    <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password-input-width" aria-label="Show password" hidden>
      Show
    </button>
  </div>
</div>

Macro

{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  label: {
    text: "Password"
  },
  id: "password-input-width",
  name: "password",
  classes: "govuk-input--width-10"
}) }}

Password input with new-password autocomplete

Supporting browsers and password managers should prompt to generate a password.

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
  <label class="govuk-label" for="password-input-new-password">
    Password
  </label>
  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    <input class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password-input-new-password" name="password" type="password" spellcheck="false" autocomplete="new-password" autocapitalize="none">
    <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password-input-new-password" aria-label="Show password" hidden>
      Show
    </button>
  </div>
</div>

Macro

{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  label: {
    text: "Password"
  },
  autocomplete: "new-password",
  id: "password-input-new-password",
  name: "password"
}) }}

Password input with translations

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input" data-i18n.show-password="Datguddia" data-i18n.hide-password="Cuddio" data-i18n.show-password-aria-label="Datgelu cyfrinair" data-i18n.hide-password-aria-label="Cuddio cyfrinair" data-i18n.password-shown-announcement="Mae eich cyfrinair yn weladwy." data-i18n.password-hidden-announcement="Mae eich cyfrinair wedi&#39;i guddio.">
  <label class="govuk-label" for="password-translated">
    Cyfrinair
  </label>
  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    <input class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password-translated" name="password-translated" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
    <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password-translated" aria-label="Datgelu cyfrinair" hidden>
      Datguddia
    </button>
  </div>
</div>

Macro

{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  label: {
    text: "Cyfrinair"
  },
  id: "password-translated",
  name: "password-translated",
  showPasswordText: "Datguddia",
  hidePasswordText: "Cuddio",
  showPasswordAriaLabelText: "Datgelu cyfrinair",
  hidePasswordAriaLabelText: "Cuddio cyfrinair",
  passwordShownAnnouncementText: "Mae eich cyfrinair yn weladwy.",
  passwordHiddenAnnouncementText: "Mae eich cyfrinair wedi'i guddio."
}) }}