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
andhide_password_text
set the text on the button -
show_password_aria_label_text
andhide_password_aria_label_text
control the text exposed to assistive technologies like screen readers -
password_shown_announcement_text
andpassword_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>