Field
Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
Kit part · Text areas
Text area
Longer text in a deeper recess: notes, messages, descriptions. It grows by its corner handle.
- Element
- <textarea>
- Needs
- kit.css
- Rules
- field.rules.md · 5
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
Every state, at once
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | Rest | Focus | Filled | Error |
|---|---|---|---|---|
| Text area |
Graphite
| Part | Rest | Focus | Filled | Error |
|---|---|---|---|---|
| Text area |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-textarea | class | on <textarea> | The recess: 96px minimum, 12px inside, 1.5 line height, resizes vertically. |
| rows · maxlength | attribute | — | Native. Say the limit in a hint as well. |
| data-error | attribute | on .tui-field | Red hairline and red hint. |
| input · change | event | — | Native. |
Markup
<label class="tui-field">
<span class="tui-label">Notes</span>
<textarea class="tui-textarea" placeholder="What changed in this take"></textarea>
</label>Needs kit.css only, no script. How to install the kit.
Accessibility
- Name it with the wrapping label; tie any hint to it with
aria-describedby. - If there is a length limit, print how much is left in the hint as people type.
How it’s built
A native <textarea> in the field recess, with its height freed (min-height: 96px, resize: vertical) and padding on every side, so text never touches the walls.
Rules
field.rules.mdIn the brain
A placeholder is an example of what goes here, never the label.
5 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.