Skip to main content
Urbicon UI
source

Textarea

Multi-line text input with auto-resize, character counter, validation, and semantic variants.

Loading...
Loading syntax highlighting...

01 Examples

Auto-resizing notes field

Pair `autoResize` with `minRows`/`maxRows` to grow the field as the user writes and cap the height before it dominates the layout.
Loading...
Loading syntax highlighting...

Character-limited composer

Combine `maxlength`, `showCounter`, and `autoResize` for tweet/comment-style inputs. The counter announces remaining characters via `aria-live`.
0/280
Loading...
Loading syntax highlighting...

Helper & error

Helper text and error text follow the same form-field contract as Input — `error` overrides `helper` when both are set and toggles `aria-invalid`.
Write a short bio for your profile page
Loading...
Loading syntax highlighting...

02 Customization

Feedback Form

Textarea in a realistic form context with bound value and character counter.
0/500

No feedback yet

Loading...
Loading syntax highlighting...

Code Input

Use slotClasses to create a code-friendly textarea with monospace font.
Loading...
Loading syntax highlighting...

Fully Custom (unstyled)

Strip all defaults and build from scratch. All behavioral features still work.
0/200
Loading...
Loading syntax highlighting...

03 Accessibility

Labels & Descriptions

The label prop creates an associated <label> element linked via for/id. Helper and error text are linked via aria-describedby, and errors set aria-invalid.

Character Counter

The character counter uses aria-live="polite" to announce remaining characters to screen readers. Color changes at warning/over thresholds are paired with text for non-color-dependent feedback.

Keyboard

Standard textarea keyboard behavior. Focus rings use focus-visible: for keyboard-only visibility. Auto-resize does not interfere with keyboard interaction or scroll position.

Reduced Motion

Mint effects respect prefers-reduced-motion. The auto-resize height adjustment is instantaneous and does not animate.

04 API Reference

23 props
23 props

No matching properties

No matching properties

05 Installation

Import

Loading...
Loading syntax highlighting...