Forms: Form Layouts

Vertical (default)

Name

Email

Message

<div class="lp-form-group">
    <label class="lp-form-group-label" for="vl-name">Name</label>
    <input id="vl-name" type="text" class="lp-input" />
</div>
<div class="lp-form-group">
    <label class="lp-form-group-label" for="vl-email">Email</label>
    <input id="vl-email" type="email" class="lp-input" />
</div>
<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label" for="vl-msg">Message</label>
    <textarea id="vl-msg" class="lp-textarea" rows="3"></textarea>
</div>

Horizontal (label beside input)

Name

Email

Message

<div class="lp-d-flex lp-gap-3 lp-mb-3 lp-items-center">
    <label class="lp-form-group-label lp-mb-0" style="min-width:120px;">Name</label>
    <input type="text" class="lp-input" />
</div>
<div class="lp-d-flex lp-gap-3 lp-mb-3 lp-items-center">
    <label class="lp-form-group-label lp-mb-0" style="min-width:120px;">Email</label>
    <input type="email" class="lp-input" />
</div>
<div class="lp-d-flex lp-gap-3 lp-items-start">
    <label class="lp-form-group-label lp-mb-0 lp-mt-2" style="min-width:120px;">Message</label>
    <textarea class="lp-textarea" rows="3"></textarea>
</div>

Inline

<div class="lp-d-flex lp-gap-2 lp-items-center lp-flex-wrap">
    <input type="email" class="lp-input" placeholder="you@example.com" style="flex:1;min-width:200px;" />
    <button type="submit" class="lp-btn lp-btn-primary">Subscribe</button>
</div>

Two-column grid

First name

Last name

Email

City

Postal code

<div class="lp-grid lp-grid-cols-2 lp-gap-3 lp-grid-cols-sm-1">
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-group-label">First name</label>
        <input type="text" class="lp-input" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-group-label">Last name</label>
        <input type="text" class="lp-input" />
    </div>
    <div class="lp-form-group lp-mb-0" style="grid-column:1 / -1;">
        <label class="lp-form-group-label">Email</label>
        <input type="email" class="lp-input" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-group-label">City</label>
        <input type="text" class="lp-input" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-group-label">Postal code</label>
        <input type="text" class="lp-input" />
    </div>
</div>

Fieldset groups

Personal information

Name

Email

Address

Street

City

Postal code

<fieldset style="border:1px solid var(--lp-border);border-radius:var(--lp-radius-md);padding:1rem;margin-bottom:1rem;">
    <legend class="lp-px-2 lp-fw-semibold">Personal information</legend>
    <div class="lp-form-group">
        <label class="lp-form-group-label">Name</label>
        <input type="text" class="lp-input" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-group-label">Email</label>
        <input type="email" class="lp-input" />
    </div>
</fieldset>

<fieldset style="border:1px solid var(--lp-border);border-radius:var(--lp-radius-md);padding:1rem;">
    <legend class="lp-px-2 lp-fw-semibold">Address</legend>
    <div class="lp-form-group">
        <label class="lp-form-group-label">Street</label>
        <input type="text" class="lp-input" />
    </div>
    <div class="lp-grid lp-grid-cols-2 lp-gap-3 lp-grid-cols-sm-1">
        <div class="lp-form-group lp-mb-0">
            <label class="lp-form-group-label">City</label>
            <input type="text" class="lp-input" />
        </div>
        <div class="lp-form-group lp-mb-0">
            <label class="lp-form-group-label">Postal code</label>
            <input type="text" class="lp-input" />
        </div>
    </div>
</fieldset>

Notes

Launchpad doesn't ship dedicated .lp-form-horizontal or .lp-form-inline classes — layout is composed using the existing flex (.lp-d-flex, .lp-gap-*, .lp-items-center) and grid (.lp-grid, .lp-grid-cols-*) utilities. This keeps form layouts aligned with the rest of your UI rather than needing a special vocabulary.