Textarea | Lime design system

Examples

A note to a friend

Grows as you type

Ask Lime

Up to 500 characters.

When to use it

Use: A description, note or request that takes several lines.
Use: A message composer that grows with what is typed (autoGrow).
Not for: The answer is one line: a title, a handle, a link. Use Input.
Not for: It is the chat box of an AI conversation with a cost and a send button. Use Chat input.

8 rules

Should: Set autoGrow for a request or message so the whole text stays in view.
Must: Wrap a textarea that collects a value in Field with a FieldLabel. Because a placeholder is gone at the first keystroke, and the field loses its name with it.
Must: Show the count in a FieldDescription before the limit; never cut the text silently. Because maxLength drops pasted text past the limit with no message.
Should: Show an example answer as the placeholder, never the label.
Must: Pass aria-label when there is no visible label. Because some screen readers skip a placeholder as the name, and it vanishes once typing starts.
Never: Set an h-* class; use rows or autoGrow. Because autoGrow writes an inline height over it, and rows counts lines at the current type size.
Must: Expect 80px minimum and 240px maximum; never lift max-h on autoGrow. Because past 240px a long note pushes the Send button off a phone screen.
Must: Submit with a button or Ctrl+Enter; Enter adds a line. Because Enter in a textarea inserts a newline, so a form that waits for Enter never sends.

4 checks

6 edge cases

Long value with autoGrow: Grows to 240px, then scrolls inside; measured on mount.
Narrow container: w-full and min-w-0, so it wraps at 160px.
Right to left: Text aligns to the start edge; the resize handle follows the direction.
Touch: The resize handle is small; use autoGrow on phones.
Inside a form: Enter adds a line and does not submit.
Forced colors: The border stays visible; the focus outline survives.

3 props

12 tokens