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-label="Show password" aria-controls="example" 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 disabled

Open this example in a new tab: Password input disabled

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" disabled 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" disabled aria-label="Show password" aria-disabled="true" aria-controls="example" hidden>
      Show
    </button>
  </div>
</div>

Macro

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

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

Password input disabled button

Open this example in a new tab: Password input disabled button

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" disabled aria-label="Show password" aria-disabled="true" aria-controls="example" hidden>
      Show
    </button>
  </div>
</div>

Macro

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

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

Password input disabled with enabled button

Open this example in a new tab: Password input disabled with enabled button

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" disabled 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-label="Show password" aria-controls="example" hidden>
      Show
    </button>
  </div>
</div>

Macro

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

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

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-label="Show password" aria-controls="new-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 button double click not prevented

Open this example in a new tab: Password input with button double click not prevented

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" data-prevent-double-click="false" type="button" aria-label="Show password" aria-controls="example" hidden>
      Show
    </button>
  </div>
</div>

Macro

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

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

Password input with button double click prevented

Open this example in a new tab: Password input with button double click prevented

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" data-prevent-double-click="true" type="button" aria-label="Show password" aria-controls="example" hidden>
      Show
    </button>
  </div>
</div>

Macro

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

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

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-label="Show password" aria-controls="with-error-message" 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 error message and hint

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

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-label="Show password" aria-controls="with-error-message" 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 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-label="Show password" aria-controls="with-hint-text" 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 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-label="Show password" aria-controls="without-heading" 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 prefix

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

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--m" for="with-prefix">
      Secret code
    </label>
  </h1>
  <div class="nhsuk-input-wrapper">
    <div class="nhsuk-input-wrapper__prefix" aria-hidden="true">PIN</div>
    <input class="nhsuk-input nhsuk-input--code nhsuk-input--width-5 nhsuk-password-input__input nhsuk-js-password-input-input" id="with-prefix" name="example" type="password" spellcheck="false" value="3.14159" autocomplete="current-password" autocapitalize="none">
    <button class="nhsuk-button nhsuk-button--brand nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle" data-module="nhsuk-button" type="button" aria-label="Show password" aria-controls="with-prefix" hidden>
      Show
    </button>
  </div>
</div>

Macro

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

{{ passwordInput({
  label: {
    text: "Secret code",
    size: "m",
    isPageHeading: true
  },
  prefix: {
    text: "PIN"
  },
  id: "with-prefix",
  name: "example",
  value: "3.14159",
  width: 5,
  code: true,
  button: {
    variant: "brand"
  }
}) }}

Password input with prefix and error message

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

Error: Enter secret code

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--m" for="with-prefix">
      Secret code
    </label>
  </h1>
  <p class="nhsuk-error-message" id="with-prefix-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter secret code
  </p>
  <div class="nhsuk-input-wrapper">
    <div class="nhsuk-input-wrapper__prefix" aria-hidden="true">PIN</div>
    <input class="nhsuk-input nhsuk-input--code nhsuk-input--error nhsuk-input--width-5 nhsuk-password-input__input nhsuk-js-password-input-input" id="with-prefix" name="example" type="password" spellcheck="false" aria-describedby="with-prefix-error" autocomplete="current-password" autocapitalize="none">
    <button class="nhsuk-button nhsuk-button--brand nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle" data-module="nhsuk-button" type="button" aria-label="Show password" aria-controls="with-prefix" hidden>
      Show
    </button>
  </div>
</div>

Macro

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

{{ passwordInput({
  label: {
    text: "Secret code",
    size: "m",
    isPageHeading: true
  },
  prefix: {
    text: "PIN"
  },
  errorMessage: {
    text: "Enter secret code"
  },
  id: "with-prefix",
  name: "example",
  width: 5,
  code: true,
  button: {
    variant: "brand"
  }
}) }}

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-label="Datgelu cyfrinair" aria-controls="password-translated" 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-label="Show password" aria-controls="width-class" 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
}) }}