Orbit

TextArea

Source

A multi-line text field for longer free-form input, resizable by default.

Basic

A controlled multi-line field driven by React state.

const [value, setValue] = useState('')

<TextArea
  placeholder="Write a message"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

Resizing

Resizable by default. Pass resizable={false} to lock the height.

<TextArea placeholder="Resizable (default)" />
<TextArea placeholder="Fixed height" resizable={false} />

Disabled

A disabled field cannot be focused or edited.

<TextArea value="This field is read only." disabled />

Props

resizable

booleandefault: true

When false, disables the resize handle and locks the height.

value

string

Controlled value.

onChange

(e: ChangeEvent<HTMLTextAreaEle…

Called on every keystroke.

placeholder

string

Placeholder shown when empty.

rows

number

Initial visible number of text lines.

disabled

booleandefault: false

Prevents interaction and dims the field.

className

string

Merged onto the textarea via tailwind-merge.