Textarea

A multi-line input field for longer user content.

1
---
2
import { Textarea } from '@bejamas/registry/ui/textarea';
3
---
4

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

Installation

bunx bejamas add textarea

npx bejamas add textarea

pnpm dlx bejamas add textarea

yarn dlx bejamas add textarea

Usage

1
---
2
import { Textarea } from '@bejamas/registry/ui/textarea';
3
---
4

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

Examples

Invalid

Set aria-invalid="true" to show the error state. Wrap the textarea in a Field with a FieldError to describe the problem.

1
---
2
import { Field, FieldError, FieldLabel } from '@bejamas/registry/ui/field';
3
import { Textarea } from '@bejamas/registry/ui/textarea';
4
---
5

6
<Field data-invalid="true" class="w-full max-w-sm">
7
  <FieldLabel for="message-invalid">Message</FieldLabel>
8
  <Textarea
9
    id="message-invalid"
10
    placeholder="Type your message here..."
11
    aria-invalid="true"
12
    aria-describedby="message-invalid-error"
13
  />
14
  <FieldError id="message-invalid-error">Message is required.</FieldError>
15
</Field>

Initial Value

Pass the initial text as children, or with value / defaultValue.

1
---
2
import { Textarea } from '@bejamas/registry/ui/textarea';
3
---
4

5
<Textarea class="max-w-sm">Thanks for the quick reply!</Textarea>