Forms: Textareas - Launchpad

Basic

Comment

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

Sizes

Small

Default

Large

<div class="lp-form-group">
    <label class="lp-form-group-label">Small</label>
    <textarea class="lp-textarea lp-textarea--sm" rows="3" placeholder="Small textarea"></textarea>
</div>
<div class="lp-form-group">
    <label class="lp-form-group-label">Default</label>
    <textarea class="lp-textarea" rows="3" placeholder="Default textarea"></textarea>
</div>
<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Large</label>
    <textarea class="lp-textarea lp-textarea--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-group-label">Vertical (default)</label>
    <textarea class="lp-textarea" rows="3"></textarea>
</div>
<div class="lp-form-group">
    <label class="lp-form-group-label">Horizontal only (<code>lp-resize-x</code>)</label>
    <textarea class="lp-textarea lp-resize-x" rows="3"></textarea>
</div>
<div class="lp-form-group">
    <label class="lp-form-group-label">Both (<code>lp-resize</code>)</label>
    <textarea class="lp-textarea lp-resize" rows="3"></textarea>
</div>
<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">None (<code>lp-resize-none</code>)</label>
    <textarea class="lp-textarea 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>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-group-label" for="ta-count">Bio (max 160)</label>
    <textarea id="ta-count" class="lp-textarea" rows="3" maxlength="160" placeholder="Tell us about yourself"></textarea>
</div>

States

Disabled

Readonly

Read-only value

Error Please provide a valid value.

Success

<div class="lp-form-group">
    <label class="lp-form-group-label">Disabled</label>
    <textarea class="lp-textarea" rows="3" disabled>Cannot edit</textarea>
</div>
<div class="lp-form-group">
    <label class="lp-form-group-label">Readonly</label>
    <textarea class="lp-textarea" rows="3" readonly>Read-only value</textarea>
</div>
<div class="lp-form-group lp-form-group--error lp-mb-2">
    <label class="lp-form-group-label">Error</label>
    <textarea class="lp-textarea" rows="3">invalid</textarea>
    <span class="lp-form-group-error">Please provide a valid value.</span>
</div>
<div class="lp-form-group lp-form-group--success lp-mb-0">
    <label class="lp-form-group-label">Success</label>
    <textarea class="lp-textarea" rows="3">Looks good</textarea>
</div>

CSS reference

Class	Purpose
`.lp-textarea`	Base textarea
`.lp-textarea--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