Forms: Text Inputs

Basic types

Text

Email

Password

Number

URL

Phone

Search

<div class="lp-form-group">
    <label class="lp-form-group-label" for="ti-text">Text</label>
    <input id="ti-text" type="text" class="lp-input" placeholder="Enter text" />
</div>
<div class="lp-form-group">
    <label class="lp-form-group-label" for="ti-email">Email</label>
    <input id="ti-email" type="email" class="lp-input" placeholder="name@example.com" />
</div>
<div class="lp-form-group">
    <label class="lp-form-group-label" for="ti-password">Password</label>
    <input id="ti-password" type="password" class="lp-input" placeholder="••••••••" />
</div>
<div class="lp-form-group">
    <label class="lp-form-group-label" for="ti-number">Number</label>
    <input id="ti-number" type="number" class="lp-input" placeholder="0" />
</div>
<div class="lp-form-group">
    <label class="lp-form-group-label" for="ti-url">URL</label>
    <input id="ti-url" type="url" class="lp-input" placeholder="https://example.com" />
</div>
<div class="lp-form-group">
    <label class="lp-form-group-label" for="ti-tel">Phone</label>
    <input id="ti-tel" type="tel" class="lp-input" placeholder="+1 (555) 010-0001" />
</div>
<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label" for="ti-search">Search</label>
    <input id="ti-search" type="search" class="lp-input" placeholder="Search…" />
</div>

Sizes

Small (lp-input--sm)

Default

Large (lp-input--lg)

<div class="lp-form-group">
    <label class="lp-form-group-label">Small (<code>lp-input--sm</code>)</label>
    <input type="text" class="lp-input lp-input--sm" placeholder="Small input" />
</div>
<div class="lp-form-group">
    <label class="lp-form-group-label">Default</label>
    <input type="text" class="lp-input" placeholder="Default input" />
</div>
<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Large (<code>lp-input--lg</code>)</label>
    <input type="text" class="lp-input lp-input--lg" placeholder="Large input" />
</div>

States

Default

Required

Disabled

Readonly

Error state This value is invalid.

Success state

<div class="lp-form-group">
    <label class="lp-form-group-label">Default</label>
    <input type="text" class="lp-input" value="Editable value" />
</div>
<div class="lp-form-group">
    <label class="lp-form-group-label lp-form-group-label--required">Required</label>
    <input type="text" class="lp-input" required />
</div>
<div class="lp-form-group">
    <label class="lp-form-group-label">Disabled</label>
    <input type="text" class="lp-input" value="Cannot edit" disabled />
</div>
<div class="lp-form-group">
    <label class="lp-form-group-label">Readonly</label>
    <input type="text" class="lp-input" value="Read-only value" readonly />
</div>
<div class="lp-form-group lp-form-group--error lp-mb-2">
    <label class="lp-form-group-label">Error state</label>
    <input type="text" class="lp-input" value="invalid" />
    <span class="lp-form-group-error">This value is invalid.</span>
</div>
<div class="lp-form-group lp-form-group--success lp-mb-0">
    <label class="lp-form-group-label">Success state</label>
    <input type="text" class="lp-input" value="Looks good" />
</div>

With help text

Username Must be 3 to 20 characters long.

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label" for="ti-help">Username</label>
    <input id="ti-help" type="text" class="lp-input" placeholder="janedoe" />
    <span class="lp-form-group-help">Must be 3 to 20 characters long.</span>
</div>

CSS reference

Class	Purpose
`.lp-input`	Base input / select-native / textarea
`.lp-input--sm / --lg`	Size variants
`.lp-form-group`	Wrapper for label + input + help/error
`.lp-form-group-label`	Label above the input
`.lp-form-group-label--required`	Adds red `*` after the label
`.lp-form-group-help`	Muted hint text below the input
`.lp-form-group-error`	Validation error message (shown in `.lp-form-group--error`)
`.lp-form-group--error / --success`	Validation state on the wrapper