Form Enhancements

Small JS-driven enhancers that bolt onto existing inputs: input masking, password strength, character counter, and clear button.

Input mask — phone

Use data-lp-mask to specify a pattern. # = digit, A = letter, * = any character.

Phone

<p class="lp-text-sm lp-text-muted lp-mb-2">Use <code>data-lp-mask</code> to specify a pattern. <code>#</code> = digit, <code>A</code> = letter, <code>*</code> = any character.</p>
<div class="lp-form-group lp-mb-0" data-lp-component="input-mask" data-lp-mask="(###) ###-####">
    <label class="lp-form-group-label">Phone</label>
    <input type="text" class="lp-input" placeholder="(___) ___-____" />
</div>

Input mask — credit card

Card number

<div class="lp-form-group lp-mb-0" data-lp-component="input-mask" data-lp-mask="#### #### #### ####">
    <label class="lp-form-group-label">Card number</label>
    <input type="text" class="lp-input" placeholder="____ ____ ____ ____" />
</div>

Input mask — date

Date (MM/DD/YYYY)

<div class="lp-form-group lp-mb-0" data-lp-component="input-mask" data-lp-mask="##/##/####">
    <label class="lp-form-group-label">Date (MM/DD/YYYY)</label>
    <input type="text" class="lp-input" placeholder="__/__/____" />
</div>

Password strength

Wrap a password input in data-lp-component="password-strength" — a 4-segment bar and label appear automatically.

Password

<p class="lp-text-sm lp-text-muted lp-mb-2">Wrap a password input in <code>data-lp-component="password-strength"</code> — a 4-segment bar and label appear automatically.</p>
<div class="lp-form-group lp-mb-0" data-lp-component="password-strength">
    <label class="lp-form-group-label">Password</label>
    <input type="password" class="lp-input" placeholder="Type to see strength" />
    <div class="lp-password-strength">
        <span class="lp-password-strength-bar"></span>
        <span class="lp-password-strength-bar"></span>
        <span class="lp-password-strength-bar"></span>
        <span class="lp-password-strength-bar"></span>
    </div>
    <span class="lp-password-strength-label"></span>
</div>

Character counter

Set maxlength on the input and add data-lp-component="char-counter" on the wrapper. The counter turns amber at 80% and red at the limit.

Tweet (max 280)

<p class="lp-text-sm lp-text-muted lp-mb-2">Set <code>maxlength</code> on the input and add <code>data-lp-component="char-counter"</code> on the wrapper. The counter turns amber at 80% and red at the limit.</p>
<div class="lp-form-group lp-mb-0" data-lp-component="char-counter">
    <label class="lp-form-group-label">Tweet (max 280)</label>
    <textarea class="lp-textarea" rows="3" maxlength="280" placeholder="What's happening?"></textarea>
</div>

Clear button

Shows a small × button inside the input that clears the value when clicked.

<p class="lp-text-sm lp-text-muted lp-mb-2">Shows a small × button inside the input that clears the value when clicked.</p>
<div class="lp-form-group lp-mb-0" data-lp-component="input-clear" style="position:relative;">
    <label class="lp-form-group-label">Search</label>
    <input type="search" class="lp-input" placeholder="Type then clear" value="Clear me" />
    <button type="button" class="lp-input-clear" aria-label="Clear">×</button>
</div>

Reference

Enhancer	Data attribute	Options
Input mask	`data-lp-component="input-mask"` + `data-lp-mask="pattern"`	`mask`, `placeholder`
Password strength	`data-lp-component="password-strength"`	—
Char counter	`data-lp-component="char-counter"`	`max`, `warnAt` (default 0.8)
Input clear	`data-lp-component="input-clear"`	—