Forms: Text Inputs

Basic inputs

Default input

With value

Required field

Password input

<div class="lp-grid lp-grid-cols-1 lp-grid-cols-sm-2 lp-gap-3">
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label" for="ti-default">Default input</label>
        <input id="ti-default" type="text" class="lp-form-control" placeholder="Enter text…" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label" for="ti-value">With value</label>
        <input id="ti-value" type="text" class="lp-form-control" value="John Doe" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label lp-form-label-required" for="ti-required">Required field</label>
        <input id="ti-required" type="text" class="lp-form-control" placeholder="This field is required" required />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label" for="ti-password">Password input</label>
        <input id="ti-password" type="password" class="lp-form-control" placeholder="Enter password" />
    </div>
</div>

Input types

Text

Email

Password

Number

Tel

URL

Date

Time

Search

<div class="lp-grid lp-grid-cols-1 lp-grid-cols-sm-2 lp-grid-cols-md-3 lp-gap-3">
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Text</label>
        <input type="text" class="lp-form-control" placeholder="Text input" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Email</label>
        <input type="email" class="lp-form-control" placeholder="email@example.com" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Password</label>
        <input type="password" class="lp-form-control" placeholder="Password" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Number</label>
        <input type="number" class="lp-form-control" placeholder="0" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Tel</label>
        <input type="tel" class="lp-form-control" placeholder="+1 (555) 123-4567" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">URL</label>
        <input type="url" class="lp-form-control" placeholder="https://example.com" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Date</label>
        <input type="date" class="lp-form-control" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Time</label>
        <input type="time" class="lp-form-control" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Search</label>
        <input type="search" class="lp-form-control" placeholder="Search…" />
    </div>
</div>

Input sizes

Small sm

Default md

Large lg

<div class="lp-grid lp-grid-cols-1 lp-grid-cols-sm-2 lp-grid-cols-md-3 lp-gap-3">
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Small <span class="lp-badge lp-badge-secondary">sm</span></label>
        <input type="text" class="lp-form-control lp-form-control-sm" placeholder="Small input" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Default <span class="lp-badge lp-badge-secondary">md</span></label>
        <input type="text" class="lp-form-control" placeholder="Default input" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Large <span class="lp-badge lp-badge-secondary">lg</span></label>
        <input type="text" class="lp-form-control lp-form-control-lg" placeholder="Large input" />
    </div>
</div>

Input with icons

Left icon

search

Right icon

email

Clearable input

Two Static Icons (Prefix + Suffix)

Use two .lp-input-icon elements for static prefix and suffix icons.

Email with verification

mail check_circle

Website URL

link open_in_new

Location

place navigation

Icon + Action Button

Use .lp-input-icon for the left icon and .lp-input-action for clickable right actions.

Password with toggle

lock

Search with clear

search

URL with copy

link

<div class="lp-grid lp-grid-cols-1 lp-grid-cols-sm-2 lp-grid-cols-md-3 lp-gap-3">
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Left icon</label>
        <div class="lp-input-wrapper">
            <span class="lp-input-icon"><span class="material-symbols-rounded">search</span></span>
            <input type="text" class="lp-form-control" placeholder="Search…" />
        </div>
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Right icon</label>
        <div class="lp-input-wrapper lp-input-wrapper-icon-right">
            <span class="lp-input-icon"><span class="material-symbols-rounded">email</span></span>
            <input type="email" class="lp-form-control" placeholder="Email address" />
        </div>
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Clearable input</label>
        <div class="lp-input-wrapper" data-lp-component="input-clear">
            <input type="text" class="lp-form-control" value="Clear me" placeholder="Type to clear…" />
        </div>
    </div>
</div>

<h5 class="lp-mt-5 lp-mb-3">Two Static Icons (Prefix + Suffix)</h5>
<p class="lp-text-muted lp-mb-4">Use two <code class="lp-code">.lp-input-icon</code> elements for static prefix and suffix icons.</p>
<div class="lp-grid lp-grid-cols-1 lp-grid-cols-sm-2 lp-grid-cols-md-3 lp-gap-3">
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Email with verification</label>
        <div class="lp-input-wrapper">
            <span class="lp-input-icon"><span class="material-symbols-rounded">mail</span></span>
            <input type="email" class="lp-form-control" value="user@example.com" />
            <span class="lp-input-icon"><span class="material-symbols-rounded">check_circle</span></span>
        </div>
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Website URL</label>
        <div class="lp-input-wrapper">
            <span class="lp-input-icon"><span class="material-symbols-rounded">link</span></span>
            <input type="url" class="lp-form-control" value="https://launchpad.local" />
            <span class="lp-input-icon"><span class="material-symbols-rounded">open_in_new</span></span>
        </div>
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Location</label>
        <div class="lp-input-wrapper">
            <span class="lp-input-icon"><span class="material-symbols-rounded">place</span></span>
            <input type="text" class="lp-form-control" value="New York, USA" />
            <span class="lp-input-icon"><span class="material-symbols-rounded">navigation</span></span>
        </div>
    </div>
</div>

<h5 class="lp-mt-5 lp-mb-3">Icon + Action Button</h5>
<p class="lp-text-muted lp-mb-4">Use <code class="lp-code">.lp-input-icon</code> for the left icon and <code class="lp-code">.lp-input-action</code> for clickable right actions.</p>
<div class="lp-grid lp-grid-cols-1 lp-grid-cols-sm-2 lp-grid-cols-md-3 lp-gap-3">
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Password with toggle</label>
        <div class="lp-input-wrapper" data-lp-component="password-toggle">
            <span class="lp-input-icon"><span class="material-symbols-rounded">lock</span></span>
            <input type="password" class="lp-form-control" placeholder="Enter password" />
            <button type="button" class="lp-input-action" aria-label="Show password">
                <span class="material-symbols-rounded">visibility</span>
            </button>
        </div>
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Search with clear</label>
        <div class="lp-input-wrapper" data-lp-component="input-clear">
            <span class="lp-input-icon"><span class="material-symbols-rounded">search</span></span>
            <input type="text" class="lp-form-control" value="Example query" placeholder="Search…" />
        </div>
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">URL with copy</label>
        <div class="lp-input-wrapper">
            <span class="lp-input-icon"><span class="material-symbols-rounded">link</span></span>
            <input type="text" class="lp-form-control" value="https://launchpad.local" readonly />
            <button type="button" class="lp-input-action" data-lp-component="copy" data-lp-text="https://launchpad.local" aria-label="Copy URL">
                <span class="material-symbols-rounded">content_copy</span>
            </button>
        </div>
    </div>
</div>

Contextual inputs — `.lp-form-control-{color}`

Primary

Success

Danger

Warning

<div class="lp-grid lp-grid-cols-1 lp-grid-cols-sm-2 lp-grid-cols-md-4 lp-gap-3">
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Primary</label>
        <input type="text" class="lp-form-control lp-form-control-primary" placeholder="Primary input" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Success</label>
        <input type="text" class="lp-form-control lp-form-control-success" placeholder="Success input" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Danger</label>
        <input type="text" class="lp-form-control lp-form-control-danger" placeholder="Danger input" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Warning</label>
        <input type="text" class="lp-form-control lp-form-control-warning" placeholder="Warning input" />
    </div>
</div>

Validation states — `.is-invalid` / `.is-valid`

Invalid state errorPlease enter a valid email address

Valid state check_circleUsername is available

Warning state warningPassword is weak, consider adding special characters

Info state infoWe'll send a verification code to this number

<div class="lp-grid lp-grid-cols-1 lp-grid-cols-sm-2 lp-gap-3">
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Invalid state</label>
        <input type="email" class="lp-form-control is-invalid" value="invalid-email" />
        <span class="lp-invalid-feedback"><span class="material-symbols-rounded">error</span>Please enter a valid email address</span>
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Valid state</label>
        <input type="text" class="lp-form-control is-valid" value="johndoe" />
        <span class="lp-valid-feedback"><span class="material-symbols-rounded">check_circle</span>Username is available</span>
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Warning state</label>
        <input type="password" class="lp-form-control is-warning" value="weak123" />
        <span class="lp-warning-feedback"><span class="material-symbols-rounded">warning</span>Password is weak, consider adding special characters</span>
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Info state</label>
        <input type="tel" class="lp-form-control is-info" placeholder="Enter phone number" />
        <span class="lp-info-feedback"><span class="material-symbols-rounded">info</span>We'll send a verification code to this number</span>
    </div>
</div>

Help text & hints

With help text helpUsername must be 3–20 characters long.

With character counter

Inline hint infoOptional

Multiple hints lockMust contain at least 8 characters securityInclude uppercase, lowercase, and numbers

<div class="lp-grid lp-grid-cols-1 lp-grid-cols-sm-2 lp-gap-3">
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label" for="ti-help">With help text</label>
        <input id="ti-help" type="text" class="lp-form-control" placeholder="Enter username" />
        <span class="lp-form-text"><span class="material-symbols-rounded">help</span>Username must be 3–20 characters long.</span>
    </div>
    <div class="lp-form-group lp-mb-0" data-lp-component="char-counter">
        <label class="lp-form-label" for="ti-bio">With character counter</label>
        <input id="ti-bio" type="text" class="lp-form-control" placeholder="Enter bio" maxlength="100" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label" for="ti-inline">Inline hint <span class="lp-form-label-hint"><span class="material-symbols-rounded">info</span>Optional</span></label>
        <input id="ti-inline" type="text" class="lp-form-control" placeholder="Enter middle name" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label" for="ti-multi">Multiple hints</label>
        <input id="ti-multi" type="password" class="lp-form-control" placeholder="Create password" />
        <span class="lp-form-text"><span class="material-symbols-rounded">lock</span>Must contain at least 8 characters</span>
        <span class="lp-form-text"><span class="material-symbols-rounded">security</span>Include uppercase, lowercase, and numbers</span>
    </div>
</div>

Disabled & readonly

Disabled input

Readonly input

Plaintext readonly

<div class="lp-grid lp-grid-cols-1 lp-grid-cols-sm-2 lp-grid-cols-md-3 lp-gap-3">
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Disabled input</label>
        <input type="text" class="lp-form-control" value="Cannot edit this" disabled />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Readonly input</label>
        <input type="text" class="lp-form-control" value="Read-only value" readonly />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Plaintext readonly</label>
        <input type="text" class="lp-form-control-plaintext" value="john.doe@example.com" readonly />
    </div>
</div>

Form layouts — horizontal / inline

Horizontal — `.lp-form-horizontal`

Full name Email

Inline — `.lp-form-inline`

<h6 class="lp-mb-2">Horizontal — <code class="lp-code">.lp-form-horizontal</code></h6>
<div class="lp-form-horizontal lp-mb-4">
    <label class="lp-form-label" for="ti-h-name">Full name</label>
    <input id="ti-h-name" type="text" class="lp-form-control" placeholder="Jane Doe" />
    <label class="lp-form-label" for="ti-h-email">Email</label>
    <input id="ti-h-email" type="email" class="lp-form-control" placeholder="jane@example.com" />
</div>
<h6 class="lp-mb-2">Inline — <code class="lp-code">.lp-form-inline</code></h6>
<form class="lp-form-inline">
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label" for="ti-i-email">Email</label>
        <input id="ti-i-email" type="email" class="lp-form-control" placeholder="name@example.com" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label" for="ti-i-pw">Password</label>
        <input id="ti-i-pw" type="password" class="lp-form-control" placeholder="••••••••" />
    </div>
    <button type="button" class="lp-btn lp-btn-primary">Sign in</button>
</form>

CSS reference

Class	Purpose
`.lp-form-control`	Base input / textarea — BS5 unified control class
`.lp-form-select`	Native select — BS5 equivalent of `.form-select`
`.lp-form-control-sm / -lg`	Size variants (Launchpad uses `sm / md / lg` — no `xs`)
`.lp-form-control-{color}`	Tinted border + focus ring (primary / secondary / success / danger / warning / info)
`.lp-form-control-plaintext`	Read-only review display — no chrome, preserves rhythm
`.is-invalid / .is-valid`	Validation state — lives on the control itself (BS5 convention)
`.is-warning / .is-info`	Launchpad-extension validation states
`.lp-invalid-feedback`	Error message shown when a sibling control is `.is-invalid`
`.lp-valid-feedback`	Success message for `.is-valid`
`.lp-warning-feedback / .lp-info-feedback`	Feedback for the Launchpad-extension states
`.lp-form-group`	Wrapper that groups label + control + feedback
`.lp-form-label`	Label above the control
`.lp-form-label-required`	Adds a red `*` after the label
`.lp-form-label-hint`	Small inline hint rendered inside the label (e.g. "optional")
`.lp-form-text`	Muted helper text below the control
`.lp-form-hints`	Flex row pairing a left-aligned hint with a right-aligned counter
`.lp-form-horizontal`	Grid: label left / control right. Modifiers: `-narrow / -wide / -auto`
`.lp-form-inline`	Single-line form — collapses to stacked below `lg`
`.lp-input-wrapper`	Absolute-positioned icon / action container around a control
`.lp-input-wrapper-icon-right`	Modifier for single trailing icon
`.lp-input-icon`	Decorative icon inside `.lp-input-wrapper`
`.lp-input-action`	Clickable trailing button (password toggle, clear, copy)
`data-lp-component="password-toggle"`	On `.lp-input-wrapper` — toggles password/text visibility
`data-lp-component="input-clear"`	On `.lp-input-wrapper` — injects a clear button
`data-lp-component="char-counter"`	On `.lp-form-group` — live character counter

Text Inputs