Skip to main content
Urbicon UI
source

Textarea

A multi-line text field.

Playground

Tier Style variant
Intent Style variant 
<Textarea
  variant="outlined"
/>

01 Examples

Auto-resizing notes field

autoResize measures the text after every keystroke and after a value you assign yourself. maxRows is where the growing stops and the field starts scrolling. minRows is a floor it never shrinks below, and the size brings a floor of its own that a small minRows disappears under.
<Textarea
  label="Notes"
  placeholder="Start typing and the field will grow..."
  autoResize
  minRows={2}
  maxRows={10}
/>

Character-limited composer

showCounter needs a maxlength to count against and then reads count/limit. It switches to the warning colour at 90 percent of the limit, which counterWarningThreshold moves, and typing stops at the limit itself.
0/280
<Textarea
  label="Tweet"
  placeholder="What's happening?"
  maxlength={280}
  showCounter
  autoResize
  minRows={2}
/>

In a form

A real <textarea> sits underneath, so name submits the text and required, readonly or an oninput handler all reach it. error is yours to set from whatever the submit finds out, and it takes the helper text's place while it is there.
Anything from a typo to a missing feature
0/500
<form
  class="border-border-subtle bg-surface-elevated w-full space-y-4 rounded-2xl border p-5"
  onsubmit={handleFeedback}
>
  <Textarea
    name="feedback"
    label="Your feedback"
    placeholder="What could we improve?"
    helper="Anything from a typo to a missing feature"
    error={feedbackError}
    maxlength={500}
    showCounter
    autoResize
    minRows={3}
    maxRows={8}
    bind:value={feedback}
  />
  <Button type="submit" size="sm">Send feedback</Button>
  {#if sent}
    <p class="text-success text-xs">Thanks, that went through.</p>
  {/if}
</form>

02 Customization

A quieter field

The single-rule look is the underline variant, so it costs no classes at all. What is left for slotClasses is the counter row underneath, addressed by the footer and counter slots.
0/200
<Textarea
  variant="underline"
  label="Release note"
  autoResize
  minRows={4}
  maxlength={200}
  showCounter
  placeholder="What changed in this version?"
  bind:value={bio}
  slotClasses={{
    footer: 'justify-start',
    counter: 'tabular-nums tracking-wide'
  }}
/>

A field that should read as the text it sits in is the bare variant, not a stack of reset classes: no frame, no fill, no padding, no fixed height, and size keeps only its type step. It needs context that says it is a field — a placeholder, a rule under the line, a label before it — and it keeps the one thing such a reset usually loses, a focus outline, whose colour is the --blocks-focus-ring-color custom property. Worked through on the Input page.

A treatment the whole form shares belongs on a BlocksProvider, as a defaults entry for Textarea next to the same entry for Input and Select. See Customization for class, slotClasses, unstyled, preset and provider-level overrides.

03 Accessibility

Labels and messages

The label prop renders a <label> linked through for/id, and the id is generated unless you pass one. Helper and error text reach the field through aria-describedby, and an error sets aria-invalid.

Character counter

The counter is aria-live="polite", so a screen reader speaks the new count once the user pauses instead of cutting in on every keystroke.

Keyboard

The focus ring shows for keyboard users only.

04 API Reference

23 props
23 props
Prop
Type
Default
Description

05 Types

Local type definitions used by this component.

7 types
Name
Kind
Category
Used by
Description

06 Installation

Import

import { Textarea } from '@urbicon-ui/blocks';
llm.txt