Password input

This component allows users to enter a password, with an option to show what they’ve entered as plain text.

Use this component whenever you need users to create or enter a password.

A default password input

Input

= f.govuk_password_field :password_1, label: { text: "Password" }

<%= f.govuk_password_field :password_1, label: { text: "Password" } %>

Output

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

A password input with a custom label, caption and hint

The password input’s title, caption and hint can be customised in the usual way.

Input

= f.govuk_password_field(:password_2,
    label: { text: "Password", tag: "h2", size: "l" },
    caption: { text: "Security", size: "m" },
    hint: { text: "Don't tell anyone your password" })

<%= f.govuk_password_field(:password_2, label: { text: "Password", tag: "h2", size: "l" }, caption: { text: "Security", size: "m" }, hint: { text: "Don't tell anyone your password" }) %>

Output

Don’t tell anyone your password

<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
  <h2 class="govuk-label-wrapper">
    <label for="person-password-2-field" class="govuk-label govuk-label--l">
      <span class="govuk-caption-m">
        Security
      </span>
      Password
    </label>
  </h2>
  <div class="govuk-hint" id="person-password-2-hint">
    Don't tell anyone your password
  </div>
  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    <input id="person-password-2-field" class="govuk-input govuk-password-input__input govuk-js-password-input-input" spellcheck="false" autocomplete="current-password" autocapitalize="none" aria-describedby="person-password-2-hint" type="password" name="person[password_2]" />
    <button data-module="govuk-button" aria-label="Show password" aria-controls="person-password-2-field" type="button" hidden="hidden" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle">
      Show
    </button>
  </div>
</div>

Password input with custom text

The component’s text can be customised or localised by providing the following arguments:

• show_password_text and hide_password_text set the text on the button
• show_password_aria_label_text and hide_password_aria_label_text control the text exposed to assistive technologies like screen readers
• password_shown_announcement_text and password_hidden_announcement_text control announcements made to screen reader users when the button is clicked

Input

= f.govuk_password_field(:password_3,
    label: { text: "Password", tag: "h2", size: "l" },
    show_password_text: "Mostra",
    hide_password_text: "Nascondi",
    show_password_aria_label_text: "Mostra la password",
    hide_password_aria_label_text: "Nascondi la password",
    password_shown_announcement_text: "La password è visibile",
    password_hidden_announcement_text: "La password non è visibile")

<%= f.govuk_password_field(:password_3, label: { text: "Password", tag: "h2", size: "l" }, show_password_text: "Mostra", hide_password_text: "Nascondi", show_password_aria_label_text: "Mostra la password", hide_password_aria_label_text: "Nascondi la password", password_shown_announcement_text: "La password è visibile", password_hidden_announcement_text: "La password non è visibile") %>

Output

<div class="govuk-form-group govuk-password-input" data-i18n.show-password="Mostra" data-i18n.hide-password="Nascondi" data-i18n.show-password-aria-label="Mostra la password" data-i18n.hide-password-aria-label="Nascondi la password" data-i18n.password-shown-announcement="La password è visibile" data-i18n.password-hidden-announcement="La password non è visibile" data-module="govuk-password-input">
  <h2 class="govuk-label-wrapper">
    <label for="person-password-3-field" class="govuk-label govuk-label--l">
      Password
    </label>
  </h2>
  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    <input id="person-password-3-field" class="govuk-input govuk-password-input__input govuk-js-password-input-input" spellcheck="false" autocomplete="current-password" autocapitalize="none" type="password" name="person[password_3]" />
    <button data-module="govuk-button" aria-label="Show password" aria-controls="person-password-3-field" type="button" hidden="hidden" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle">
      Mostra
    </button>
  </div>
</div>