Text area
Longer text in a deeper recess: notes, messages, descriptions. It grows by its corner handle.
Kit parts
Log pad
A writing pad that is still a real textarea. A sheet of ruled paper is set into a machined frame, and the rules move with the words. A small LCD in the foot counts characters or words: it lights amber near the limit and red over it, and the limit is said once, in words, when it is crossed. The pad grows with the text up to a height you choose.
Seats open in 11 days. Want one email that morning?
Anatomy
The rules are the textarea’s own background. The line height is a pixel value shared by the text and the rules, which is what locks the two together. The paper is the kit’s paper tokens, the same in every finish. The LCD is the kit’s own, backlit amber and then red by two colour mixes, and its unlit segments are always the same width as the number. The counting, the state and the sentence are pure functions, tested.
Variants
- Empty, with its hint
- Near the limit · amber
- Over the limit · red
- Counting words
- No limit: it only counts
- Disabled
- Long text scrolls, rules and all
States
- Empty
- Near the limit
- Over the limit
- Focus
Props and options
| Name | Kind | Description |
|---|---|---|
| name · label · placeholder · value | attribute | An empty builds the whole pad from these. |
| [data-state] | attribute | On the element and on the meter, set by script. Amber glass for warn, red for over. |
| aria-invalid · setCustomValidity | state | Set on the textarea while the count is past the limit, with a message a form shows. Put maxlength on the textarea if the limit should be hard. |
| count · textarea | property | What has been written, in the unit; and the textarea itself. |
| refresh() | method | Recount, recolour and regrow. Call it after setting textarea.value from script. |
| logPadCount · logPadState · logPadMeter · logPadSays · logPadLimit · logPadHTML | function | The rules, pure: what has been written, which state that is, what the LCD shows, what to say when the limit is crossed, and the markup for a page that renders one on a server. |
Usage notes
Write in it, or press Add a paragraph a few times. Amber near the limit, red over it. Then try Post note: the form will not send it.
Accessibility
- The LCD repeats the count for the eye and is hidden from assistive technology.
- Crossing the limit is said once, in a polite live region. Nothing is said in between, so the pad does not talk while someone types.
- The amber and the red are second signals.
- The digits on the amber and red glass are dark on a light ground: about 8:1 on amber and 5:1 on red.
- The focus ring goes round the frame, since the sheet is inside it; it uses the finish’s ring colour, which reads on the frame in every finish.
- With reduced motion the meter changes colour at once; the pad still grows, since that is a change of size, not an animation.
- Keyboard: it is a textarea, so Tab moves in and out and Enter adds a new line. The pad adds no keys of its own.
