Textarea

Multiline text field for entering long text.

Also known as: multiline input, text area, rich text field

View in Storybook

When to use

• Multiline text entry (descriptions, comments, notes). For single-line text, use Input.
• For code editing, consider a dedicated code editor.

Import

import { Textarea } from '@vacano/ui'

Basic Usage

<Textarea label="Description" placeholder="Enter description..." />

Variants

<Textarea variant="normal" label="Normal" placeholder="Normal textarea" />
<Textarea variant="error" label="Error" placeholder="Error textarea" />

Rows

The number of visible rows can be configured via the rows prop:

<Textarea rows={2} label="Small" placeholder="2 rows" />
<Textarea rows={4} label="Default" placeholder="4 rows (default)" />
<Textarea rows={8} label="Large" placeholder="8 rows" />

Full Width

<Textarea fullWidth label="Full width" placeholder="Expands to container width" />

Disabled

<Textarea disabled label="Disabled" placeholder="Disabled textarea" />
<Textarea disabled label="Disabled with value" value="Some text" />

Without Label

<Textarea placeholder="Textarea without label" />

Controlled

const [value, setValue] = useState('')

<Textarea
  value={value}
  onChange={(e) => setValue(e.target.value)}
  label="Controlled"
  placeholder="Controlled textarea"
/>

With Message

<Textarea label="Bio" variant="error" message="Bio is required" />
<Textarea label="Notes" message="Optional field" />

With Character Count

<Textarea label="Description" count={200} placeholder="Max 200 characters" />

Props

Prop	Type	Default	Description
label	string	-	Label text above the field
variant	'normal' | 'error'	'normal'	Visual variant
rows	number	4	Number of visible rows
fullWidth	boolean	false	Takes full container width
message	string	-	Message text below textarea (error, hint)
count	number	-	Max character count (shows counter)
className	string	-	CSS class name for the root element
classnames	TextareaClassNames	-	Custom class names for inner elements
ref	Ref<HTMLTextAreaElement>	-	Ref to the underlying textarea element
data-test-id	string	-	Test identifier attribute

All standard HTML textarea attributes are also supported (e.g. value, onChange, placeholder, disabled, name, maxLength, etc.).

ClassNames

Key	Description
textarea	Textarea element
label	Label element

Related

• Input - Single-line text input
• FieldLabel - Standalone form label
• FieldMessage - Validation and helper messages