Inputs — Textarea with counter and action bar

A labelled textarea shares a boundary with attach, mention, counter and Post controls. Use for a short optional message composer.

ReactHTML

1440 × 480

Open in new tab

Component.tsx28 lines

export default function InputsTextareaCounter() {
  return (
    <div className="w-72 text-neutral-900 sm:w-[26rem]">
      <div className="mb-1.5 flex items-center justify-between text-sm">
        <label htmlFor="counter-message" className="font-medium">Message</label>
        <span className="text-neutral-500">Optional</span>
      </div>
      <div className="rounded-md border border-neutral-300 bg-white has-[textarea:focus-visible]:outline-2 has-[textarea:focus-visible]:outline-offset-2 has-[textarea:focus-visible]:outline-neutral-900">
        <textarea id="counter-message" name="message" maxLength={280} aria-describedby="counter-count counter-hint" placeholder="Write a short message" className="block h-24 w-full resize-none rounded-t-md border-0 bg-white px-3 py-2 text-sm placeholder:text-neutral-500 focus-visible:outline-hidden" />
        <div className="flex h-11 items-center justify-between gap-2 border-t border-neutral-200 px-2">
          <div className="flex gap-1">
            <button type="button" aria-label="Attach a file" className="inline-flex size-8 items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><path d="m8 12 6-6a3 3 0 0 1 4 4l-8 8a5 5 0 0 1-7-7l9-9M7 13l7-7" /></svg>
            </button>
            <button type="button" aria-label="Mention a person" className="inline-flex size-8 items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><circle cx="12" cy="12" r="4" /><path d="M16 8v6a2 2 0 0 0 4 0v-2a8 8 0 1 0-3 6.2" /></svg>
            </button>
          </div>
          <div className="flex items-center gap-3">
            <span id="counter-count" className="text-xs text-neutral-500 tabular-nums">0 / 280</span>
            <button type="button" className="inline-flex h-8 items-center justify-center rounded-md bg-neutral-900 px-3 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Post</button>
          </div>
        </div>
      </div>
      <p id="counter-hint" className="mt-1.5 text-sm text-neutral-500">Hint about what to include.</p>
    </div>
  )
}

Pattern notes

When to use: Use for a short composer with utilities and a length limit. Pick inputs-field-anatomy for a single-line message. Variations: replace Mention with formatting, remove Optional for a required note, or add a linked validation message.
Hierarchy: Read Message, the textarea, then the action bar and hint. Attach and Mention have accessible names. The static 0 / 280 counter and hint are linked through aria-describedby; maxLength is 280. Placeholder up to 6 words, hint up to 6, Post one word.
Responsive: At 640px only the width increases from 288px to 416px. The textarea height and action bar remain fixed; the textarea has resize-none to prevent resizing. The 32px actions and counter fit one row at 288px.
Layout: A 288px (w-72) composer expands to 416px (sm:w-[26rem]) at 640px. A 14px label row has Optional on the right and 6px bottom spacing. One neutral-300 border with 6px radius surrounds a 96px textarea and a 44px action bar, divided by a neutral-200 hairline. The bar has two 32px ghost icon buttons, a 12px tabular counter and a 32px primary Post action. A 14px hint sits 6px below.
States: Textarea focus outlines the wrapper by 2px neutral-900 offset 2px via has-[textarea:focus-visible]. The textarea uses focus-visible:outline-hidden with a transparent forced-colors outline. Icon buttons fill neutral-100 on hover; Post fills neutral-700. Every button has the standard focus outline. Counter updates and posting require host behaviour; textarea editing and its maximum length are native.

Desktop wireframe

┌───────────────────────────────────────────────┐
│ Message                            Optional   │
│ ┌─────────────────────────────────────────┐   │
│ │ Write a short message                   │   │
│ │                                         │   │
│ │                                         │   │
│ ├─────────────────────────────────────────┤   │
│ │ [Attach] [Mention]    0 / 280 [Post]    │   │
│ └─────────────────────────────────────────┘   │
│ Hint about what to include.                   │
└───────────────────────────────────────────────┘

View all

Inputs — Date range with a shared note
Layout tags: split,form,compact
Inputs — Dimensions with proportions and units
Layout tags: split,form,numbers,compact
Inputs — Field grid with mixed widths
Layout tags: grid,form,compact

Inputs — Textarea with counter and action bar

Pattern notes

More in Inputs

Inputs — Date range with a shared note

Inputs — Dimensions with proportions and units

Inputs — Field grid with mixed widths