Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Password input

These examples are used for automated tests and may not follow service manual best practice.

Password input default

Open this example in a new tab: Password input default

Code

Markup

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

Macro

{% from "password-input/macro.njk" import passwordInput -%}

{{ passwordInput({
  label: {
    text: "Password",
    size: "l",
    isPageHeading: true
  },
  name: "example"
}) }}

Password input with autocomplete attribute

Open this example in a new tab: Password input with autocomplete attribute

Code

Markup

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

Macro

{% from "password-input/macro.njk" import passwordInput -%}

{{ passwordInput({
  label: {
    text: "Password",
    size: "l",
    isPageHeading: true
  },
  id: "new-password",
  name: "example",
  autocomplete: "new-password"
}) }}

Password input with error message

Open this example in a new tab: Password input with error message

Error: Enter a password

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error nhsuk-password-input" data-module="nhsuk-password-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-error-message">
      Password
    </label>
  </h1>
  <p class="nhsuk-error-message" id="with-error-message-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter a password
  </p>
  <div class="nhsuk-input-wrapper">
    <input class="nhsuk-input nhsuk-input--error nhsuk-password-input__input nhsuk-js-password-input-input" id="with-error-message" name="example" type="password" spellcheck="false" aria-describedby="with-error-message-error" autocomplete="current-password" autocapitalize="none">
    <button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle" data-module="nhsuk-button" type="button" aria-controls="with-error-message" aria-label="Show password" hidden>
      Show
    </button>
  </div>
</div>

Macro

{% from "password-input/macro.njk" import passwordInput -%}

{{ passwordInput({
  label: {
    text: "Password",
    size: "l",
    isPageHeading: true
  },
  errorMessage: {
    text: "Enter a password"
  },
  id: "with-error-message",
  name: "example"
}) }}

Password input with hint

Open this example in a new tab: Password input with hint

It probably has some letters, numbers and maybe even some symbols in it
Code

Markup

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

Macro

{% from "password-input/macro.njk" import passwordInput -%}

{{ passwordInput({
  label: {
    text: "Password",
    size: "l",
    isPageHeading: true
  },
  hint: {
    text: "It probably has some letters, numbers and maybe even some symbols in it"
  },
  id: "with-hint-text",
  name: "example"
}) }}

Password input with hint and error

Open this example in a new tab: Password input with hint and error

It probably has some letters, numbers and maybe even some symbols in it

Error: Enter a password

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error nhsuk-password-input" data-module="nhsuk-password-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-error-message">
      Password
    </label>
  </h1>
  <div class="nhsuk-hint" id="with-error-message-hint">
    It probably has some letters, numbers and maybe even some symbols in it
  </div>
  <p class="nhsuk-error-message" id="with-error-message-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter a password
  </p>
  <div class="nhsuk-input-wrapper">
    <input class="nhsuk-input nhsuk-input--error nhsuk-password-input__input nhsuk-js-password-input-input" id="with-error-message" name="example" type="password" spellcheck="false" aria-describedby="with-error-message-hint with-error-message-error" autocomplete="current-password" autocapitalize="none">
    <button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle" data-module="nhsuk-button" type="button" aria-controls="with-error-message" aria-label="Show password" hidden>
      Show
    </button>
  </div>
</div>

Macro

{% from "password-input/macro.njk" import passwordInput -%}

{{ passwordInput({
  label: {
    text: "Password",
    size: "l",
    isPageHeading: true
  },
  hint: {
    text: "It probably has some letters, numbers and maybe even some symbols in it"
  },
  errorMessage: {
    text: "Enter a password"
  },
  id: "with-error-message",
  name: "example"
}) }}

Password input without page heading

Open this example in a new tab: Password input without page heading

Code

Markup

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

Macro

{% from "password-input/macro.njk" import passwordInput -%}

{{ passwordInput({
  label: {
    text: "Password"
  },
  id: "without-heading",
  name: "example"
}) }}

Password input with translations

Open this example in a new tab: Password input with translations

Code

Markup

<div class="nhsuk-form-group nhsuk-password-input" data-module="nhsuk-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.">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="password-translated">
      Cyfrinair
    </label>
  </h1>
  <div class="nhsuk-input-wrapper">
    <input class="nhsuk-input nhsuk-password-input__input nhsuk-js-password-input-input" id="password-translated" name="example" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
    <button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle" data-module="nhsuk-button" type="button" aria-controls="password-translated" aria-label="Datgelu cyfrinair" hidden>
      Datguddia
    </button>
  </div>
</div>

Macro

{% from "password-input/macro.njk" import passwordInput -%}

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

Password input with width

Open this example in a new tab: Password input with width

Code

Markup

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

Macro

{% from "password-input/macro.njk" import passwordInput -%}

{{ passwordInput({
  label: {
    text: "Password",
    size: "l",
    isPageHeading: true
  },
  id: "width-class",
  name: "example",
  width: 10
}) }}