Forms: Validation - Launchpad

Contextual states

Apply lp-form-group--{error|success|warning|info} on the wrapper. The matching message element (lp-form-group-{error|success|warning|info}) becomes visible, the label is tinted, and the input border — including on hover and focus — matches the state color.

Error state ⊗ Please enter a valid email address

Success state ✓ Username is available

Warning state ⚠ Password is weak, consider adding special characters

Info state ⓘ We'll send a verification code to this number

<p class="lp-text-sm lp-text-muted lp-mb-3">Apply <code>lp-form-group--{error|success|warning|info}</code> on the wrapper. The matching message element (<code>lp-form-group-{error|success|warning|info}</code>) becomes visible, the label is tinted, and the input border — including on hover and focus — matches the state color.</p>
<div class="lp-grid lp-grid-cols-2 lp-gap-3 lp-grid-cols-sm-1">
    <div class="lp-form-group lp-form-group--error">
        <label class="lp-form-group-label">Error state</label>
        <input type="email" class="lp-input" value="invalid-email" />
        <span class="lp-form-group-error">⊗ Please enter a valid email address</span>
    </div>
    <div class="lp-form-group lp-form-group--success">
        <label class="lp-form-group-label">Success state</label>
        <input type="text" class="lp-input" value="johndoe" />
        <span class="lp-form-group-success">✓ Username is available</span>
    </div>
    <div class="lp-form-group lp-form-group--warning">
        <label class="lp-form-group-label">Warning state</label>
        <input type="password" class="lp-input" value="1234567" />
        <span class="lp-form-group-warning">⚠ Password is weak, consider adding special characters</span>
    </div>
    <div class="lp-form-group lp-form-group--info lp-mb-0">
        <label class="lp-form-group-label">Info state</label>
        <input type="tel" class="lp-input" placeholder="Enter phone number" />
        <span class="lp-form-group-info">ⓘ We'll send a verification code to this number</span>
    </div>
</div>

Neutral (default) state

Phone Include country code when dialing internationally.

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Phone</label>
    <input type="tel" class="lp-input" value="+1 (555) 010-0001" />
    <span class="lp-form-group-help">Include country code when dialing internationally.</span>
</div>

Hover & focus preview

Move your cursor over each of these fields to see the matching contextual hover border, then click to focus and see the matching focus ring.

Hover / focus error

Hover / focus success

Hover / focus warning

Hover / focus info

<p class="lp-text-sm lp-text-muted lp-mb-3">Move your cursor over each of these fields to see the matching contextual hover border, then click to focus and see the matching focus ring.</p>
<div class="lp-grid lp-grid-cols-2 lp-gap-3 lp-grid-cols-sm-1">
    <div class="lp-form-group lp-form-group--error">
        <label class="lp-form-group-label">Hover / focus error</label>
        <input type="text" class="lp-input" placeholder="Hover me then click" />
    </div>
    <div class="lp-form-group lp-form-group--success">
        <label class="lp-form-group-label">Hover / focus success</label>
        <input type="text" class="lp-input" placeholder="Hover me then click" />
    </div>
    <div class="lp-form-group lp-form-group--warning">
        <label class="lp-form-group-label">Hover / focus warning</label>
        <input type="text" class="lp-input" placeholder="Hover me then click" />
    </div>
    <div class="lp-form-group lp-form-group--info lp-mb-0">
        <label class="lp-form-group-label">Hover / focus info</label>
        <input type="text" class="lp-input" placeholder="Hover me then click" />
    </div>
</div>

Live validation (FormController)

Each field has data-lp-rules listing validation rules. The form validates on blur and on submit.

<p class="lp-text-sm lp-text-muted lp-mb-2">Each field has <code>data-lp-rules</code> listing validation rules. The form validates on blur and on submit.</p>
<form data-lp-component="form-controller" data-lp-validation="onBlur" id="val-form">
    <div class="lp-form-group" data-lp-component="field" data-lp-rules="required|email">
        <label class="lp-form-group-label lp-form-group-label--required" for="val-email">Email</label>
        <input id="val-email" name="email" type="email" class="lp-input" />
        <span class="lp-form-group-error"></span>
    </div>

    <div class="lp-form-group" data-lp-component="field" data-lp-rules="required|min:8">
        <label class="lp-form-group-label lp-form-group-label--required" for="val-password">Password</label>
        <input id="val-password" name="password" type="password" class="lp-input" />
        <span class="lp-form-group-error"></span>
        <span class="lp-form-group-help">Must be at least 8 characters.</span>
    </div>

    <div class="lp-form-group" data-lp-component="field" data-lp-rules="required|match:password">
        <label class="lp-form-group-label lp-form-group-label--required" for="val-confirm">Confirm password</label>
        <input id="val-confirm" name="password_confirm" type="password" class="lp-input" />
        <span class="lp-form-group-error"></span>
    </div>

    <div class="lp-form-group" data-lp-component="field" data-lp-rules="required">
        <label class="lp-form-group-label lp-form-group-label--required">I agree to the terms</label>
        <label class="lp-checkbox">
            <input type="checkbox" name="terms" />
            <span class="lp-checkbox-box"></span>
            <span>Yes, I agree</span>
        </label>
        <span class="lp-form-group-error"></span>
    </div>

    <button type="submit" class="lp-btn lp-btn-primary">Submit</button>
</form>

Built-in validation rules

Rule	Syntax	Checks
`required`	`required`	Value is not empty
`email`	`email`	Valid email format
`url`	`url`	Valid URL format
`numeric`	`numeric`	Numeric string
`alpha`	`alpha`	Letters only
`phone`	`phone`	Phone number format
`min`	`min:8`	Minimum length / numeric value
`max`	`max:100`	Maximum length / numeric value
`pattern`	`pattern:^[a-z]+$`	Matches a regex
`match`	`match:password`	Equals another field's value

Separate multiple rules with |. Parameters follow a colon. Rules can also be registered programmatically via Validator.register(name, fn).

CSS reference

Class	Purpose
`.lp-form-group--error`	Red border + tinted label; reveals `.lp-form-group-error`
`.lp-form-group--success`	Green border + tinted label; reveals `.lp-form-group-success`
`.lp-form-group--warning`	Amber border + tinted label; reveals `.lp-form-group-warning`
`.lp-form-group--info`	Blue border + tinted label; reveals `.lp-form-group-info`
`.lp-form-group-{error\|success\|warning\|info}`	Message element for each state (hidden by default)
`.lp-form-group-help`	Muted hint text (auto-hidden when any state class is present)

Hover and focus rings automatically pick up the state color — e.g. an input inside .lp-form-group--warning keeps its amber border on hover and gets an amber focus halo instead of the default primary blue.