Forms: Textareas - Launchpad

Basic

Comment

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-label" for="ta-basic">Comment</label>
    <textarea id="ta-basic" class="lp-form-control" rows="4" placeholder="Write something…"></textarea>
</div>

Sizes

Small

Default

Large

<div class="lp-form-group">
    <label class="lp-form-label">Small</label>
    <textarea class="lp-form-control lp-form-control-sm" rows="3" placeholder="Small textarea"></textarea>
</div>
<div class="lp-form-group">
    <label class="lp-form-label">Default</label>
    <textarea class="lp-form-control" rows="3" placeholder="Default textarea"></textarea>
</div>
<div class="lp-form-group lp-mb-0">
    <label class="lp-form-label">Large</label>
    <textarea class="lp-form-control lp-form-control-lg" rows="3" placeholder="Large textarea"></textarea>
</div>

Resize modes

Vertical (default)

Horizontal only (lp-resize-x)

Both (lp-resize)

None (lp-resize-none)

<div class="lp-form-group">
    <label class="lp-form-label">Vertical (default)</label>
    <textarea class="lp-form-control" rows="3"></textarea>
</div>
<div class="lp-form-group">
    <label class="lp-form-label">Horizontal only (<code class="lp-code">lp-resize-x</code>)</label>
    <textarea class="lp-form-control lp-resize-x" rows="3"></textarea>
</div>
<div class="lp-form-group">
    <label class="lp-form-label">Both (<code class="lp-code">lp-resize</code>)</label>
    <textarea class="lp-form-control lp-resize" rows="3"></textarea>
</div>
<div class="lp-form-group lp-mb-0">
    <label class="lp-form-label">None (<code class="lp-code">lp-resize-none</code>)</label>
    <textarea class="lp-form-control lp-resize-none" rows="3"></textarea>
</div>

Character counter

Wrap the textarea with data-lp-component="char-counter". The counter auto-appears and turns warning when 80% of the max is reached.

Bio (max 160)

<p class="lp-text-sm lp-text-muted lp-mb-2">Wrap the textarea with <code class="lp-code">data-lp-component="char-counter"</code>. The counter auto-appears and turns warning when 80% of the max is reached.</p>
<div class="lp-form-group lp-mb-0" data-lp-component="char-counter">
    <label class="lp-form-label" for="ta-count">Bio (max 160)</label>
    <textarea id="ta-count" class="lp-form-control" rows="3" maxlength="160" placeholder="Tell us about yourself"></textarea>
</div>

States

Disabled

Readonly

Read-only value

Invalid Please provide a valid value.

Valid Looks good!

<div class="lp-form-group">
    <label class="lp-form-label">Disabled</label>
    <textarea class="lp-form-control" rows="3" disabled>Cannot edit</textarea>
</div>
<div class="lp-form-group">
    <label class="lp-form-label">Readonly</label>
    <textarea class="lp-form-control" rows="3" readonly>Read-only value</textarea>
</div>
<div class="lp-form-group lp-mb-2">
    <label class="lp-form-label">Invalid</label>
    <textarea class="lp-form-control is-invalid" rows="3">invalid</textarea>
    <span class="lp-invalid-feedback">Please provide a valid value.</span>
</div>
<div class="lp-form-group lp-mb-0">
    <label class="lp-form-label">Valid</label>
    <textarea class="lp-form-control is-valid" rows="3">Looks good</textarea>
    <span class="lp-valid-feedback">Looks good!</span>
</div>

CSS reference

Class	Purpose
`.lp-form-control`	Base textarea
`.lp-form-control-sm / --lg`	Size variants
`.lp-resize / .lp-resize-x / .lp-resize-y / .lp-resize-none`	Resize direction utility classes
`data-lp-component="char-counter"`	Auto-wire the character counter enhancer