Textarea
Styled native multiline text control. Forwards standard HTML textarea attributes.
<Textarea placeholder="Type your message here." />Usage
import { Textarea } from "@reva/ui";<Textarea placeholder="Type your message here." />Examples
Sizes
Use size: sm, default, lg, or xl. Min-height and vertical padding scale with the control (single-line height matches Input for each size).
<VStack className="w-full max-w-sm" gap={3}> <Textarea placeholder="Small (sm)" rows={3} size="sm" /> <Textarea placeholder="Default" rows={3} size="default" /> <Textarea placeholder="Large (lg)" rows={3} size="lg" /> <Textarea placeholder="Extra large (xl)" rows={3} size="xl" /></VStack>With label
Pair with Label using id and htmlFor.
<VStack className="w-full max-w-sm" gap={2}> <Label htmlFor="demo-textarea-notes">Notes</Label> <Textarea id="demo-textarea-notes" name="notes" placeholder="Add notes…" rows={4} /></VStack>Field
Use Field, FieldLabel, and FieldDescription for a label and helper text.
Enter your message below.
<Field className="w-full max-w-sm"> <FieldLabel htmlFor="textarea-message">Message</FieldLabel> <FieldDescription>Enter your message below.</FieldDescription> <Textarea id="textarea-message" placeholder="Type your message here." rows={4} /></Field>Disabled
<VStack className="w-full max-w-sm" gap={2}> <Label htmlFor="textarea-disabled">Message</Label> <Textarea disabled id="textarea-disabled" placeholder="Type your message here." rows={4} /></VStack>Invalid
Use aria-invalid for error styling (matches component focus/error rings). Pair with helper or FieldDescription copy.
Please enter a valid message.
<Field className="w-full max-w-sm" data-invalid="true"> <FieldLabel htmlFor="textarea-invalid">Message</FieldLabel> <Textarea aria-invalid id="textarea-invalid" placeholder="Type your message here." rows={4} /> <FieldDescription>Please enter a valid message.</FieldDescription></Field>With button
<VStack className="w-full max-w-sm" gap={2}> <Textarea placeholder="Type your message here." rows={4} /> <HStack justify="end"> <Button type="button">Send message</Button> </HStack></VStack>Props
| Prop | Description |
|---|---|
size | Optional. sm | default | lg | xl — min-height, padding, and font size. Default: default. |
| … | All other props are forwarded to the native <textarea> (rows, cols, value, defaultValue, onChange, disabled, aria-*, autoComplete, name, id, placeholder, etc.). |
See MDN — <textarea> for attribute reference.