Textarea

Multi-line text input for longer form content

Installation

Install the textarea component using the shadcn CLI:

npx shadcn@latest add https://tezosx-ui.vercel.app/registry/tezosx/textarea.json

Examples

Default

Basic textarea with placeholder

<Textarea placeholder="Type your message here..." />

With Label

Textarea with associated label

Your Message

<div className="space-y-2">
  <Label htmlFor="message">Your Message</Label>
  <Textarea id="message" placeholder="Tell us what you think..." />
</div>

Disabled

Non-interactive textarea

Disabled Textarea

<Textarea 
  placeholder="This textarea is disabled" 
  disabled 
/>

Controlled

Textarea with controlled state and character count

Bio

0/200 characters

const [value, setValue] = useState("");

<div className="space-y-2">
  <Label htmlFor="controlled">Bio</Label>
  <Textarea 
    id="controlled" 
    placeholder="Tell us about yourself..."
    value={value}
    onChange={(e) => setValue(e.target.value)}
    maxLength={200}
  />
  <p className="text-sm text-muted-foreground">
    {value.length}/200 characters
  </p>
</div>

Form Example

Textarea in a complete form

const [feedback, setFeedback] = useState("");

<form 
  onSubmit={(e) => {
    e.preventDefault();
    alert(`Feedback submitted: ${feedback}`);
    setFeedback("");
  }}
  className="space-y-4"
>
  <div className="space-y-2">
    <Label htmlFor="feedback">Send us your feedback</Label>
    <Textarea 
      id="feedback"
      placeholder="What can we improve?"
      value={feedback}
      onChange={(e) => setFeedback(e.target.value)}
      required
      rows={4}
    />
  </div>
  <Button type="submit">Submit Feedback</Button>
</form>

Custom Height

Adjust the default height with rows prop

Small (3 rows)

Large (10 rows)

<Textarea rows={3} placeholder="Small..." />
<Textarea rows={10} placeholder="Large..." />

API Reference

The Textarea component accepts all standard HTML textarea attributes plus:

Prop	Type	Default	Description
className	string	-	Additional CSS classes
placeholder	string	-	Placeholder text
disabled	boolean	false	Disable the textarea
rows	number	-	Number of visible text lines
value	string	-	Controlled value
onChange	function	-	Change event handler
maxLength	number	-	Maximum character length
required	boolean	false	Mark as required field

Accessibility

• Use Label component for accessible labels
• The textarea automatically receives focus styles
• Supports keyboard navigation and selection
• Disabled state is properly communicated to screen readers
• Use aria-describedby for error messages
• The component is vertically resizable by default