Skip to main content

Password input examples

  • # default

    Open this example in a new tab: button 
    {
  "label": {
    "text": "Password"
  },
  "name": "password"
}
    
{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  "label": {
    "text": "Password"
  },
  "name": "password"
}) }}

  • # with hint text

    Open this example in a new tab: button
    It probably has some letters, numbers and maybe even some symbols in it. 
    {
  "label": {
    "text": "Password"
  },
  "hint": {
    "text": "It probably has some letters, numbers and maybe even some symbols in it."
  },
  "id": "password-input-with-hint-text",
  "name": "test-name-2"
}
    
{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  "label": {
    "text": "Password"
  },
  "hint": {
    "text": "It probably has some letters, numbers and maybe even some symbols in it."
  },
  "id": "password-input-with-hint-text",
  "name": "test-name-2"
}) }}

  • # with error message

    Open this example in a new tab: button
    It probably has some letters, numbers and maybe even some symbols in it.

    Error: Error message goes here 

    {
  "label": {
    "text": "Password"
  },
  "hint": {
    "text": "It probably has some letters, numbers and maybe even some symbols in it."
  },
  "id": "password-input-with-error-message",
  "name": "test-name-3",
  "errorMessage": {
    "text": "Error message goes here"
  }
}
    
{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  "label": {
    "text": "Password"
  },
  "hint": {
    "text": "It probably has some letters, numbers and maybe even some symbols in it."
  },
  "id": "password-input-with-error-message",
  "name": "test-name-3",
  "errorMessage": {
    "text": "Error message goes here"
  }
}) }}

  • # with label as page heading

    Open this example in a new tab: button 

    {
  "label": {
    "text": "Password",
    "classes": "govuk-label--l",
    "isPageHeading": true
  },
  "id": "password-input-with-page-heading",
  "name": "test-name"
}
    
{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  "label": {
    "text": "Password",
    "classes": "govuk-label--l",
    "isPageHeading": true
  },
  "id": "password-input-with-page-heading",
  "name": "test-name"
}) }}

  • # with input width class

    Open this example in a new tab: button 
    {
  "label": {
    "text": "Password"
  },
  "id": "password-input-width",
  "name": "password",
  "classes": "govuk-input--width-10"
}
    
{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  "label": {
    "text": "Password"
  },
  "id": "password-input-width",
  "name": "password",
  "classes": "govuk-input--width-10"
}) }}

  • # classes

    Open this example in a new tab: button 
    {
  "id": "with-classes",
  "name": "with-classes",
  "label": {
    "text": "With classes"
  },
  "classes": "app-input--custom-modifier"
}
    
{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  "id": "with-classes",
  "name": "with-classes",
  "label": {
    "text": "With classes"
  },
  "classes": "app-input--custom-modifier"
}) }}

  • # id

    Open this example in a new tab: button 
    {
  "id": "password-id",
  "name": "testing-name",
  "label": {
    "text": "With custom id"
  }
}
    
{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  "id": "password-id",
  "name": "testing-name",
  "label": {
    "text": "With custom id"
  }
}) }}

  • # value

    Open this example in a new tab: button 
    {
  "id": "with-value",
  "name": "with-value",
  "label": {
    "text": "With value"
  },
  "value": "Hunter2"
}
    
{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  "id": "with-value",
  "name": "with-value",
  "label": {
    "text": "With value"
  },
  "value": "Hunter2"
}) }}

  • # attributes

    Open this example in a new tab: button 
    {
  "id": "with-attributes",
  "name": "with-attributes",
  "label": {
    "text": "With attributes"
  },
  "attributes": {
    "data-attribute": "value",
    "data-another": "ok"
  }
}
    
{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  "id": "with-attributes",
  "name": "with-attributes",
  "label": {
    "text": "With attributes"
  },
  "attributes": {
    "data-attribute": "value",
    "data-another": "ok"
  }
}) }}

  • # with describedBy

    Open this example in a new tab: button 
    {
  "id": "with-describedby",
  "name": "with-describedby",
  "label": {
    "text": "With describedBy"
  },
  "describedBy": "test-target-element"
}
    
{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  "id": "with-describedby",
  "name": "with-describedby",
  "label": {
    "text": "With describedBy"
  },
  "describedBy": "test-target-element"
}) }}

  • # with new-password autocomplete

    Open this example in a new tab: button 
    {
  "label": {
    "text": "Password"
  },
  "autocomplete": "new-password",
  "id": "password-input-new-password",
  "name": "password"
}
    
{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  "label": {
    "text": "Password"
  },
  "autocomplete": "new-password",
  "id": "password-input-new-password",
  "name": "password"
}) }}

  • # with translations

    Open this example in a new tab: button 
    {
  "label": {
    "text": "Cyfrinair"
  },
  "id": "password-translated",
  "name": "password-translated",
  "showPasswordText": "Datguddia",
  "hidePasswordText": "Cuddio",
  "showPasswordAriaLabelText": "Datgelu cyfrinair",
  "hidePasswordAriaLabelText": "Cuddio cyfrinair",
  "passwordShownAnnouncementText": "Mae eich cyfrinair yn weladwy.",
  "passwordHiddenAnnouncementText": "Mae eich cyfrinair wedi'i guddio."
}
    
{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  "label": {
    "text": "Cyfrinair"
  },
  "id": "password-translated",
  "name": "password-translated",
  "showPasswordText": "Datguddia",
  "hidePasswordText": "Cuddio",
  "showPasswordAriaLabelText": "Datgelu cyfrinair",
  "hidePasswordAriaLabelText": "Cuddio cyfrinair",
  "passwordShownAnnouncementText": "Mae eich cyfrinair yn weladwy.",
  "passwordHiddenAnnouncementText": "Mae eich cyfrinair wedi'i guddio."
}) }}