Component

Password input

The password input component helps users to create and enter passwords.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "govuk_publishing_components/components/password_input", {} %>

GOV.UK Design System

This component incorporates components from the GOV.UK Design System:

Accessibility acceptance criteria

The password input component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • be usable with touch
  • indicate when they have focus
  • be recognisable as form input elements
  • have correctly associated labels
  • have the appropriate type of ‘password’
  • have an appropriate validation message if there was an error
  • allow users to interact with any ‘show password’ button
  • allow users to use autocomplete to securely create and enter passwords
  • allow users to copy and paste into the password input

When CSS and / or JavaScript is unavailable, the component must:

  • fallback to a regular input element, with the show/hide button hidden

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

  • id - accepts a string for the element ID attribute
  • data_attributes - accepts a hash of data attributes
  • aria - accepts a hash of aria attributes
  • classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
  • role - accepts a space separated string of roles
  • lang - accepts a language attribute value
  • open - accepts an open attribute value (true or false)
  • hidden - accepts an empty string, ‘hidden’, or ‘until-found’
  • tabindex - accepts an integer. The integer can also be passed as a string.
  • dir - accepts ‘rtl’, ‘ltr’, or ‘auto’.

With name (preview)

If no name is provided, it defaults to “password”.

<%= render "govuk_publishing_components/components/password_input", {
  name: "user[password]"
} %>

With error (preview)

If there is a validation error, passing error text will style the password input component with error styles, and semantically state that there was a validation error.

Error: Enter a password 

<%= render "govuk_publishing_components/components/password_input", {
  error_text: "Enter a password"
} %>

With custom label and error text (preview)

For translations or other purposes, the text presented to the user in this component can be changed.

Note that the error text prefix and announcements are hidden visually and used by assistive tools when there is an error.

By default, the error prefix is “Error”.

By default, the password shown announcement is “Your password is visible”.

By default, the password hidden announcement is “Your password is hidden”.

Incompatible: 6 is scared of 7, so they can't be next to each other. 

<%= render "govuk_publishing_components/components/password_input", {
  label_text: "Secret number",
  error_text_prefix: "Incompatible",
  error_text: "6 is scared of 7, so they can't be next to each other.",
  button_show_password_aria_label: "View password",
  button_hide_password_aria_label: "Obscure password",
  button_show_password_text: "View",
  button_hide_password_text: "Obscure",
  password_shown_announcement: "Secret number is in view",
  password_hidden_announcement: "Secret number is obscured"
} %>

With margin bottom (preview)

The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale. It defaults to having a margin bottom of 30px.

<%= render "govuk_publishing_components/components/password_input", {
  margin_bottom: 5
} %>