1. Collections Component Guide
  2. Show password input (experimental)
  3. With data attributes
Show password input (experimental) example

With data attributes

Data attributes can be passed to add to the input element. If the data attribute starts with data-button- this attribute will be applied to the show/hide button, instead of the input. Note that if JS is disabled, all attributes are added to the input.

How it looks (preview)

How to call this example

<%= render "govuk_publishing_components/components/show_password", {
  label: {
    text: "Your password"
  },
  data: {
    example_1: "value",
    example_2: "thing",
    button_example_1: "wotsit",
    button_example_2: "doodad"
  }
} %>