Textarea

Collects text that runs to more than one line.

Configurations

Supported configurations for this component.

DefaultError

States

Interaction states covered by the API and the style contract.

HoverFocus visibleDisabledError focusFilled

Configurations

2 examples
Default
sm
md
lg
Error
Brief must be at least 80 characters
sm
Brief must be at least 80 characters
md
Brief must be at least 80 characters
lg

States

5 examples
Hover
Rest
Hover
Focus visible
Rest
Focus visible
Disabled
Error focus
Rest
Brief must be at least 80 characters
Error focus
Filled
Rest
Filled

Add to your project

One command adds this component to your project.

1

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

PropTypeDefaultDescription
labelstring-Label rendered above the field and linked to it.
size'sm'|'md'|'lg''md'Rung on the shared control ladder. Sets padding and text size to match an Input of the same size; the height still comes from `rows`.
errorstring-When set, switches the field into the error state.
rowsnumber4Number of visible text lines; sets the field's initial height.
classNamestring-Forwarded to the <textarea>.
wrapperClassNamestring-Forwarded to the outer wrapper.

More Andromeda Pro components

Alert

Displays a status message in the flow of the page, at a severity from note to fault.

4 variants

Avatar

Represents a person as a square image tile that falls back to their initials.

6 variants1 states

Badge

Displays the state a row or cell reports, such as online, queued, or fault.

8 variants