Version 0.40.0

UI Atoms

Forms password

Form password input (default)

Form password input allows users to toggle password field text visibility on click.

Form password input (masked)

<div class="sui-a-form-password">
    <input class="sui-a-form-control" type="password" value="Password"/>
    <button type="button" class="sui-a-form-password__button as--show">
        <i class="sui-a-icon as--fa-eye"></i>
    </button>
    <button type="button" class="sui-a-form-password__button as--hide">
        <i class="sui-a-icon as--fa-eye-slash"></i>
    </button>
</div>

Form password input (visible)

Change the input type to text to unmask the password.

<div class="sui-a-form-password">
    <input class="sui-a-form-control" type="text" value="Password"/>
    <button type="button" class="sui-a-form-password__button as--show">
        <i class="sui-a-icon as--fa-eye"></i>
    </button>
    <button type="button" class="sui-a-form-password__button as--hide">
        <i class="sui-a-icon as--fa-eye-slash"></i>
    </button>
</div>

Inline Form password input

<div class="sui-a-form-password as--inline">
    <input class="sui-a-form-control" type="password" value="Password"/>
    <button type="button" class="sui-a-form-password__button as--show">
        <i class="sui-a-icon as--fa-eye"></i>
    </button>
    <button type="button" class="sui-a-form-password__button as--hide">
        <i class="sui-a-icon as--fa-eye-slash"></i>
    </button>
</div>

Form password input disabled

<div class="sui-a-form-password">
    <input class="sui-a-form-control" type="password" value="Password" disabled/>
    <button type="button" class="sui-a-form-password__button as--show">
        <i class="sui-a-icon as--fa-eye"></i>
    </button>
    <button type="button" class="sui-a-form-password__button as--hide">
        <i class="sui-a-icon as--fa-eye-slash"></i>
    </button>
</div>