Password requirements

.PassReq

The component PassReq should be used to provide feedback on if a password meets all requirements.

Example

Password requirements

Password should be at least 8 characters long

Use at least one numeric character

Use at least one special character

Use at least one capital letter

Markup

<div class="Message Message--info break Message--small">
    <h4>Password requirements</h4>
    <p class="PassReq ">Password should be at least 8 characters long</p>
    <p class="PassReq">Use at least one numeric character</p>
    <p class="PassReq">Use at least one special character</p>
    <p class="PassReq">Use at least one capital letter</p>
</div>

Is passed

Modifiers

is-passed
Use this to indicate that the requirement is met

Password requirements

Password should be at least 8 characters long

Use at least one numeric character

Use at least one special character

Use at least one capital letter

Markup

<div class="Message Message--info break Message--small">
    <h4>Password requirements</h4>
    <p class="PassReq [modifier class]">Password should be at least 8 characters long</p>
    <p class="PassReq">Use at least one numeric character</p>
    <p class="PassReq">Use at least one special character</p>
    <p class="PassReq">Use at least one capital letter</p>
</div>