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.

<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>
{% from "components/password/_macro.njk" import onsPassword %}

{{
    onsPassword({
        "id": "password",
        "label": {
            "text": "Password"
        },
        "showPasswordText": "Show password"
    })
}}
Name Type Required Description
id string true The id of the input. This will also be added to the label if a label is specified
label Label (ref) false Settings for the input label. for will automatically be set to match the input id
showPasswordText string true Text for the show password toggle
fieldId string false Id for the field
fieldClasses string false Classes for the field
error Error (ref) false Configuration for validation errors
{% macro onsPassword(params) %}
    {% from "components/field/_macro.njk" import onsField %}
    {% from "components/label/_macro.njk" import onsLabel %}
    {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
    {% from "components/input/_macro.njk" import onsInput %}

    {% call onsField({
        "id": params.fieldId,
        "classes": "ons-js-password" + (" " + params.fieldClasses if params.fieldClasses else ""),
        "error": params.error
    }) %}
        {{
            onsLabel({
                "for": params.id,
                "text": params.label.text,
                "description": params.label.description,
                "classes": params.label.classes
            })
        }}
        {{
            onsCheckbox({
                "id": params.id + "-toggle",
                "classes": "ons-js-password-toggle-wrap ons-checkbox--toggle ons-u-d-no",
                "inputClasses": "ons-js-password-toggle",
                "name": "show-password",
                "label": {
                    "text": params.showPasswordText
                }
            })
        }}
        {{
            onsInput({
                "id": params.id,
                "name": params.name,
                "type": "password",
                "classes": "ons-u-mt-xs ons-js-password-input" + (" ons-input--error" if params.error else ""),
                "dontWrap": true
            })
        }}
    {% endcall %}
{% endmacro %}

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 component

Let us know how we could improve this component or share your user research findings. Discuss the ‘Password’ component on GitHub