Textarea

Multi-line text field.

Code

import { Textarea } from "@/components/ui/textarea"
import { Field, FieldControl, FieldLabel } from "@/components/ui/field"

<Field>
  <FieldLabel>Notes</FieldLabel>
  <FieldControl>
    <Textarea placeholder="E.g. deliver after 2 PM" />
  </FieldControl>
</Field>

Examples

Example source

var P = window.PUI, h = React.createElement;
  ReactDOM.createRoot(document.getElementById('preview')).render(h('div', { className: 'pui-field', style: { maxWidth: 420 } },
    h(P.Label, { htmlFor: 'notes' }, 'Notes'),
    h(P.Textarea, { id: 'notes', placeholder: 'E.g. deliver after 2 PM' })));

Usage

What you provide

A linked Label, a placeholder with a real example, optional rows.
If there is a character limit, show the counter below in text-muted-foreground.

Accessibility

Same rules as Input: wrap it in Field, keep a visible label, tie instructions and errors to it, and keep the typed text after an invalid submit.
Enter adds a new line here; the form is submitted with its button.
Announce a character limit before typing; when showing a live counter, don't announce every keystroke.

Adapted from Magoo 1.6.0 by Marcelo Sales: Input "text" (input-text), Form validation (validacao-formularios). Magoo is educational guidance; test the behavior in your implementation.

API

Install with:

npx @aline-aroucha/pui add textarea

<Field>
  <FieldLabel />
  <FieldControl>
    <Textarea />
  </FieldControl>
</Field>

Textarea

Name	Type	Default
`value`	`string`	—
Controlled value.
`defaultValue`	`string`	—
Initial value when uncontrolled.
`placeholder`	`string`	—
An example value; never a replacement for the label.
`rows`	`number`	—
Visible lines; the field also grows with its content.
`maxLength`	`number`	—
Character limit; state it before the person types.
`disabled`	`boolean`	`false`
Blocks editing.