Textarea
Multi-line text field with label, hint and character counter.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
Visible to your team.
0/200
<div class="px-field">
<label class="px-label" for="ta-1">Description</label>
<div class="px-input px-input--textarea">
<textarea id="ta-1" rows="4" maxlength="200" placeholder="Tell your team what this project is about…" aria-describedby="ta-1-hint"></textarea>
</div>
<div class="px-field__foot"><p class="px-hint" id="ta-1-hint">Visible to your team.</p><p class="px-hint">0/200</p></div>
</div>Usage
- Use for answers longer than one line.
- Show the limit before people hit it.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Error
Add a short description.
<div class="px-field px-field--error">
<label class="px-label" for="ta-2">Reason</label>
<div class="px-input px-input--textarea"><textarea id="ta-2" rows="3" aria-invalid="true" aria-describedby="ta-2-e"></textarea></div>
<p class="px-hint px-hint--error" id="ta-2-e">Add a short description.</p>
</div>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-input--textarea | class | Textarea variant of px-input. Resizes vertically. |
Figma properties
Textarea12 variants · page “Input Fields”Open
Multi-line text field with label, hint and character counter. Resizable vertically in code; min height --px-textarea-height.
| Property | Type | Values |
|---|---|---|
| Label | Text | “Description” |
| Hint | Text | “Visible to your team.” |
| Show label | Boolean | — |
| Show hint | Boolean | — |
| Required | Boolean | — |
| Error message | Text | “Add a short description.” |
| State | Variant | Active Hover Focused Filled Disabled Error |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-input-content-placeholder | color-content-neutral-placeholder | #667085 |
--px-input-content-label | color-content-neutral-secondary | #475467 |
--px-input-content-hint | color-content-neutral-tertiary | #667085 |
--px-input-content-error | color-content-danger-default | #b42318 |
--px-input-radius | radius-12 | 12px |
--px-input-height-md | spacing-40 | 40px |
--px-input-padding-x | spacing-12 | 12px |
--px-input-height-sm | spacing-36 | 36px |
--px-input-height-lg | control-height-lg | 48px |
--px-input-gap | spacing-8 | 8px |
--px-input-field-gap | spacing-8 | 8px |
--px-input-width | 320px | 320px |
--px-textarea-height | 120px | 120px |
--px-textarea-padding-x | spacing-12 | 12px |
Show all 16 tokens
| Token | Alias | Light value |
|---|---|---|
--px-textarea-padding-y | spacing-12 | 12px |
--px-input-focus-halo | #2563eb2e | #2563eb2e |
Accessibility
- Same rules as Input. Announce counters politely, not on every key.