Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

View cookies

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Password

The password component lets the user enter a hidden password which they can show if they need to check what they’ve entered.

Open this example in a new tab (Example: Example Password)

Example: Example Password contents

Nunjucks

{% from "components/password/_macro.njk" import onsPassword %}

{{
    onsPassword({
        "id": "password",
        "label": {
            "text": "Password"
        },
        "showPasswordText": "Show password"
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
idstringtrueThe HTML id of the input. Used for the label’s for attribute.
labelLabel (ref)trueSettings for the input label. The for attribute will be automatically set to use the value of the input’s id.
showPasswordTextstringtrueText for the “Show password” checkbox toggle label
namestringfalseThe HTML name attribute for the input
fieldIdstringfalseThe HTML id for the field
fieldClassesstringfalseClasses for the field
errorError (ref)falseConfiguration for validation errors

HTML

<div class="ons-field ons-js-password">
  <label class="ons-label" for="password">Password</label>
  <span class="ons-checkbox ons-js-password-toggle-wrap ons-checkbox--toggle ons-u-d-no">
    <input type="checkbox" id="password-toggle" class="ons-checkbox__input ons-js-checkbox ons-js-password-toggle"
      value="" name="show-password">
    <label class=" ons-checkbox__label " for="password-toggle" id="password-toggle-label">Show password</label>
  </span>
  <input type="password" id="password"
    class="ons-input ons-input--text ons-input-type__input ons-u-mt-xs ons-js-password-input" />
</div>

When to use this component

Use the password component when you need users to create or enter secret information they are likely to want hidden while they enter it.

How to use this component

The <input> and <label> is separated by a checkbox component with classes .ons-js-password-toggle-wrap and .ons-checkbox--toggle on the wrapping <div> and .ons-js-password-toggle on the <input>.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Password’ component on GitHub (opens in a new tab)