Textarea – Once UI

The Textarea component provides a multi-line text input field for collecting longer form text content from users. It grows with its content by default; pass lines a number to fix it at that many rows instead.

Textarea

Comments

<Textarea
  id="basic-textarea"
  label="Comments"
  placeholder="Enter your comments here"
/>

Description

Add a description to provide additional context or instructions for the textarea.

Description

Bio

Your bio will be displayed on your public profile

<Textarea
  id="bio-textarea"
  label="Bio"
  placeholder="Tell us about yourself"
  description="Your bio will be displayed on your public profile"
  lines={5}
/>

Error state

Display error messages by setting the error and errorMessage props.

Error state

Description

This field is required

<Textarea
  id="error-textarea"
  label="Description"
  placeholder="Enter a description"
  error={true}
  errorMessage="This field is required"
/>

Resize

Control how the textarea can be resized using the resize prop. It applies only to a fixed height — a textarea left on the default lines="auto" sizes itself, so it has no resize handle to give you.

Resize

Vertical Resize

No Resize

<Textarea
  id="resize-vertical"
  label="Vertical Resize"
  placeholder="This textarea can be resized vertically"
  lines={4}
  resize="vertical"
/>

<Textarea
  id="resize-none"
  label="No Resize"
  placeholder="This textarea cannot be resized"
  lines={4}
  resize="none"
/>

Fixed height

A textarea resizes itself to fit its content. Pass lines a number to fix it at that many rows instead, which is also what gives it a resize handle.

Fixed height

Notes

<Textarea
  id="fixed-height-textarea"
  label="Notes"
  placeholder="Enter your notes"
  lines={4}
/>

Height

Use the size prop to set the height of the input.

Height

Extra small textarea

Small textarea

Medium textarea

Large textarea

Extra large textarea

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

const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
  setValue(e.target.value);
};

<Textarea
  id="height-textarea"
  placeholder="Height"
  value={value}
  onChange={handleChange}
  size="l"
/>

Radius

You can use the corners prop to apply custom radius to sides or corners. It works well with the Column component's -1 gap to create a seamless connection between textareas.

Styling

Top Radius

Bottom Radius

<Column gap="-1" fillWidth>
  <Textarea
    id="custom-top"
    label="Top Radius"
    placeholder="This textarea has top radius"
    corners="top"
  />
  <Textarea
    id="custom-bottom"
    label="Bottom Radius"
    placeholder="This textarea has bottom radius"
    corners="bottom"
  />
</Column>

State

Manage the Textarea state with React's useState hook.

State

Message

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

const handleChange = (e) => {
  setValue(e.target.value);
};

<Textarea
  id="state-textarea"
  label="Message"
  value={value}
  onChange={handleChange}
  placeholder="Type your message"
/>

Sizes

The Textarea component supports five sizes: extra small, small, medium, large, and extra large.

Sizes

<Textarea placeholder="Extra Small" size="xs" />
<Textarea placeholder="Small" size="s" />
<Textarea placeholder="Medium" size="m" />
<Textarea placeholder="Large" size="l" />
<Textarea placeholder="Extra Large" size="xl" />

On touch devices

The same 16px font and 1.3 line-height clamps that Input applies on touch pointers apply here, for the same reason: below 16px, iOS Safari zooms on focus and does not reliably zoom back. A textarea grows with its content, so it anchors its floating label to a fixed top inset rather than centring the pair, but the gap between label and text is the one Input uses. See Input for the full table.

Validation

Use the validate prop to add custom validation to the Textarea.

Validation

Review

const validateContent = (value) => {
  if (value && value.length < 20) {
      return "Please enter at least 20 characters";
  }
  return null;
};

<Textarea
  id="validation-textarea"
  label="Review"
  placeholder="Write your review"
  validate={validateContent}
/>

Character count

Display a character counter with color-coded feedback based on remaining characters. The counter changes color when approaching the limit.

Character count

200

const [bio, setBio] = useState<string>("");

const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
  setBio(e.target.value);
};

<Textarea
  id="bio-textarea"
  placeholder="Bio"
  value={bio}
  onChange={handleChange}
  maxLength={200}
  characterCount
  lines={4}
/>

Focus ring

Like Input, a textarea draws no focus ring by default. Set focusRing to outline the field on focus — see Input for the whole story.

Focus ring

About

<Textarea id="about" label="About" focusRing />

API reference

Prop	Type	Default
idrequired	string	—
label	string	—
placeholder	string	—
lines	numberauto	auto
size	xllmsxs	—
error	boolean	false
errorMessage	ReactNode	—
description	ReactNode	—
corners Round only some corners. Inside a [Form](/form-controls/form) with density="stacked" this is worked out for you.	nonetoprightbottomlefttop-lefttop-rightbottom-rightbottom-left	—
className	string	—
prefix	ReactNode	—
suffix	ReactNode	—
variant Ghost drops the border and background.	defaultghost	default
focusRing	boolean	false
characterCount	boolean	—
resize	horizontalverticalbothnone	vertical
validate	(value: ReactNode) => ReactNode \| null	—
disabled	boolean	false
span How many columns to occupy inside a [Form](/form-controls/form) grid. Ignored outside one.	number	—
style	React.CSSProperties	—
…and every React.TextareaHTMLAttributes prop	inherited	—