Textarea

The Textarea component provides a multi-line text input field for longer content like comments, descriptions, or messages. It's styled consistently with other form components in the design system.

Features

• Multi-line text input
• Consistent styling with Input component
• Placeholder support
• Disabled state
• Focus ring indicator
• Auto-resizable (via CSS or JavaScript)
• Form integration

Usage

import { Textarea } from '@loke/design-system/textarea';

export default function Example() {
  return <Textarea placeholder="Type your message here." />;
}

Tips:

• Set rows to control the initial visible height.
• Use with Label for accessibility.
• Consider maxLength to limit input length.

Props

Textarea

The Textarea component accepts all standard HTML textarea attributes.

Examples

Basic textarea

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

With label

<div className="grid w-full gap-1.5">
  <Label htmlFor="message">Your message</Label>
  <Textarea placeholder="Type your message here." id="message" />
  <p className="text-sm text-muted-foreground">
    Your message will be copied to the support team.
  </p>
</div>

Disabled state

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

In a form

<form className="grid gap-4">
  <div className="grid gap-2">
    <Label htmlFor="bio">Bio</Label>
    <Textarea
      id="bio"
      placeholder="Tell us about yourself..."
      rows={4}
    />
  </div>
  <div className="grid gap-2">
    <Label htmlFor="feedback">Feedback</Label>
    <Textarea
      id="feedback"
      placeholder="Share your feedback..."
      maxLength={500}
    />
    <p className="text-xs text-muted-foreground">
      Maximum 500 characters.
    </p>
  </div>
  <Button type="submit">Submit</Button>
</form>

Accessibility

• Always pair with a Label component for screen reader support.
• Use id to associate the label with the textarea.
• Provide helpful placeholder text as a guide, not a replacement for labels.
• Use aria-describedby to link to helper text or error messages.
• Disabled state is communicated via the disabled attribute.

Best practices

• Provide a visible label for the textarea.
• Use placeholder text to give hints about expected content.
• Set an appropriate rows value based on expected content length.
• Consider using maxLength to prevent excessively long input.
• Add helper text to explain formatting requirements.
• Use form validation to provide feedback on input.
• Consider auto-resize behavior for better UX.
• Test with keyboard navigation and screen readers.