@thebase/ui/docs/components/textarea.md

CDN-installable Owl and Bootstrap 5 UI component library.

# Textarea

Native multiline text input with BaseUI and Bootstrap styling.

## Pure Owl component

```js
import { Textarea } from "@thebase/ui";
```

```base-ui
<div class="d-flex flex-column gap-4" style="max-width: 28rem; width: 100%">
  <Textarea placeholder="'Type your message here.'"/>

  <div class="d-grid gap-3">
    <Label htmlFor="'message'">Your message</Label>
    <Textarea placeholder="'Type your message here.'" id="'message'"/>
  </div>

  <div class="d-grid gap-3">
    <Label htmlFor="'message-2'">Your Message</Label>
    <Textarea placeholder="'Type your message here.'" id="'message-2'"/>
    <Typography variant="'small'" className="'text-muted'">Your message will be copied to the support team.</Typography>
  </div>

  <div class="d-grid gap-2">
    <Textarea placeholder="'Type your message here.'"/>
    <Button>Send message</Button>
  </div>

  <Textarea placeholder="'Type your message here.'" disabled="true"/>
</div>
```

| Component | Prop | Type | Notes |
| --- | --- | --- | --- |
| `Textarea` | `value` | `String` | optional |
| `Textarea` | `placeholder` | `String` | optional |
| `Textarea` | `rows` | `Number` | optional |
| `Textarea` | `disabled` | `Boolean` | optional |
| `Textarea` | `readonly` | `Boolean` | optional |
| `Textarea` | `resize` | `String` | optional |
| `Textarea` | `className` | `String` | optional |
| `Textarea` | `id` | `String` | optional, e.g. for `Label`'s `for` |
| `Textarea` | `onInput` | `Function` | optional |
| `Textarea` | `onChange` | `Function` | optional |

See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.

## Static component

```base-ui
<textarea b-ui="textarea" placeholder="Write a note"></textarea>
```

Options: `b-att-resize="none"`.

Accessibility: pair with a `<label>` and use `aria-describedby` for helper or error text.