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

Overview

Use this component to allow a user to enter their password.

The password is hidden by default, but the user can choose to show it if they want to check what they have entered.

Open this example in a new tab (Example Password)

Example Password contents

Nunjucks

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

{{
    onsPassword({
        "id": "password",
        "label": {
            "text": "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.
showPasswordTextstringfalseText for the “Show password” checkbox toggle label. Default is "Show password".
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-2xs ons-js-password-input" />
</div>

How this component works

The <input> and <label> is separated by a checkbox component (opens in a new tab) .

This checkbox has classes .ons-js-password-toggle-wrap and .ons-checkbox--toggle on the wrapping <div> and .ons-js-password-toggle on the <input>.

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) 

Back to top