Password input example

With custom label and error text

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”.

How it looks (preview)

Secret number

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

How to call this example

<%= 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"
} %>