TextArea

A multi-line text field, with the look and states of Input.

Usage

TextArea is the box, TextArea.Text the native textarea.

tsx

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

<Label htmlFor="message">message</Label>
<TextArea>
  <TextArea.Text
    id="message"
    value={value}
    onChange={(event) => setValue(event.target.value)}
    placeholder="write something"
  />
</TextArea>

message

Height

The box is as tall as the rows. Give the box a height and the text fills it.

tsx

<TextArea>
  <TextArea.Text rows={2} placeholder="two rows" />
</TextArea>

<TextArea className="h-40">
  <TextArea.Text placeholder="a fixed box" />
</TextArea>

noteIt can't be resized by dragging. Add resize-y to TextArea.Text if you want the handle.

States

tsx

<TextArea active>
  <TextArea.Text placeholder="active" />
</TextArea>

<TextArea clickable={false}>
  <TextArea.Text placeholder="inert" />
</TextArea>

<TextArea>
  <TextArea.Text placeholder="disabled" disabled />
</TextArea>

notedisabled goes on TextArea.Text: the box dims itself.

In a form

tsx

<form onSubmit={handleSubmit}>
  <TextArea>
    <TextArea.Text name="message" required minLength={20} />
  </TextArea>
  <Button as="button" type="submit">
    <Button.Label>send</Button.Label>
  </Button>
</form>

Reference

prop	type	default
`as?`	`ElementType`	`"div"`	the element or component to render
`active?`	`boolean`	`false`	keeps the border highlighted; visual only
`clickable?`	`boolean`	`true`	false makes the whole field inert
`…rest`	`props of as`	`—`	typed against the chosen element

prop	type	default
`rows?`	`number`	`4`	the visible lines
`className?`	`string`	`—`	merged over the defaults
`…rest`	`props of textarea`	`—`	value, onChange, name, placeholder, disabled…