Textarea input field

FREE

Free and open-source React textarea input field components built for modern applications and websites. These textarea input fields are built using React Aria and styled with Tailwind CSS.

Textarea example

This is a hint text to help user.

Installation

You can add this textarea component using our CLI or manually:

npx untitledui@latest add textarea

Textarea examples

Below are examples and variations of this textarea component:

Default

This is a hint text to help user.

Disabled

This is a hint text to help user.

Invalid

This is an error message.

API reference

TextArea

Import TextArea from @/components/base/textarea/textarea. Renders React Aria’s TextField — all of its props are supported.

TextArea props
PropTypeDefaultDescription
labelstring—Label text for the textarea.
hintReactNode—Helper text displayed below the textarea.
tooltipstring—Tooltip message displayed after the label.
size
"sm""md"
"md"Textarea size.
textAreaClassNameClassNameOrFunction<InputRenderProps>—Class name for the textarea wrapper.
textAreaRefRef<HTMLTextAreaElement>—Ref for the textarea.
hideRequiredIndicatorboolean—Whether to hide required indicator from label.
placeholderstring—Placeholder text.
rowsnumber—Visible height of textarea in rows.
colsnumber—Visible width of textarea in columns.
Props from React Aria (51)
TextArea inherited props
PropTypeDefaultDescription
onBlur((e: FocusEvent<HTMLInputElement, Element>) => void)—Handler that is called when the element loses focus.
onFocus((e: FocusEvent<HTMLInputElement, Element>) => void)—Handler that is called when the element receives focus.
onFocusChange((isFocused: boolean) => void)—Handler that is called when the element's focus status changes.
autoFocusboolean—Whether the element should receive focus on render.
excludeFromTabOrderboolean—Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
onKeyDown((e: KeyboardEvent) => void)—Handler that is called when a key is pressed.
onKeyUp((e: KeyboardEvent) => void)—Handler that is called when a key is released.
formstring—The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document.
namestring—The name of the input element, used when submitting an HTML form.
autoCompletestring—Describes the type of autocomplete functionality the input should provide if any.
autoCorrectstring—An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide.
inputMode
"text""search""none""tel""url""email""numeric""decimal"
—Hints at the type of data that might be entered by the user while editing the element or its contents.
maxLengthnumber—The maximum number of characters supported by the input.
minLengthnumber—The minimum number of characters required by the input.
patternstring—Regex pattern that the value of the input must match to be valid.
spellCheckstring—An enumerated attribute that defines whether the element may be checked for spelling errors.
type(string & {}) | "text" | "search" | "tel" | "url" | "email" | "password""text"The type of input to render.
defaultValuestring—The default value (uncontrolled).
enterKeyHint
"search""enter""done""go""next""previous""send"
—An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards.
idstring—The element's unique identifier.
isDisabledboolean—Whether the input is disabled.
isInvalidboolean—Whether the value is invalid.
isReadOnlyboolean—Whether the input can be selected but not changed by the user.
isRequiredboolean—Whether user input is required on the input before form submission.
onChange((value: string) => void)—Handler that is called when the value changes.
onCompositionEndCompositionEventHandler<HTMLInputElement>—Handler that is called when a text composition system completes or cancels the current text composition session.
onCompositionStartCompositionEventHandler<HTMLInputElement>—Handler that is called when a text composition system starts a new text composition session.
onCompositionUpdateCompositionEventHandler<HTMLInputElement>—Handler that is called when a new character is received in the current text composition session.
validate((value: string) => ValidationError | true | null | undefined)—A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.
validationBehavior
"native""aria"
"native"Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
valuestring—The current value (controlled).
styleStyleOrFunction<TextFieldRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
childrenChildrenOrFunction<TextFieldRenderProps>—The children of the component. A function may be provided to alter the children based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<TextFieldRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", TextFieldRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.
aria-errormessagestring—Identifies the element that provides an error message for the object.
aria-activedescendantstring—Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-autocomplete
"none""list""inline""both"
—Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
aria-controlsstring—Identifies the element (or elements) whose contents or presence are controlled by the current element.
aria-haspopup
falsetrue"true""false""menu""listbox""tree""grid""dialog"
—Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
onBeforeInputFormEventHandler<HTMLInputElement>—Handler that is called when the input value is about to be modified.
onCopyClipboardEventHandler<HTMLInputElement>—Handler that is called when the user copies text.
onCutClipboardEventHandler<HTMLInputElement>—Handler that is called when the user cuts text.
onInputFormEventHandler<HTMLInputElement>—Handler that is called when the input value is modified.
onPasteClipboardEventHandler<HTMLInputElement>—Handler that is called when the user pastes text.
onSelectReactEventHandler<HTMLInputElement>—Handler that is called when text in the input is selected.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

TextAreaBase

Import TextAreaBase from @/components/base/textarea/textarea. Renders React Aria’s TextArea — all of its props are supported.

TextAreaBase props
PropTypeDefaultDescription
size
"sm""md"
"md"Controls the padding and text size of the textarea.
Props from React Aria (6)
TextAreaBase inherited props
PropTypeDefaultDescription
onHoverChange((isHovering: boolean) => void)—Handler that is called when the hover state changes.
onHoverEnd((e: HoverEvent) => void)—Handler that is called when a hover interaction ends.
onHoverStart((e: HoverEvent) => void)—Handler that is called when a hover interaction starts.
styleStyleOrFunction<InputRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
classNameClassNameOrFunction<InputRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"textarea", InputRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Also accepts all standard textarea attributes, all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

FAQs

Please refer to our frequently asked questions page for more.

Textareas support "sm" and "md" through the size prop. The default is "md". The size changes the padding and font size of the textarea and the size of the hint text.

Use the rows prop to set the number of visible lines, like rows={5} in the examples. For a fixed height, pass a Tailwind height class through textAreaClassName instead.

The textarea keeps the browser's native resize handle, restyled to match the theme in light and dark mode. To change this, add resize-none, resize-y or resize to textAreaClassName.

Set isInvalid to true and pass the error message as hint. The border switches to the error color and the hint is styled as an error. Because TextArea wraps React Aria's TextField, you can also use its validation props such as isRequired, maxLength and validate.

Pass value and onChange. Since it's built on React Aria's TextField, onChange receives the new string value rather than an event. For an uncontrolled textarea, use defaultValue.

className styles the wrapper that holds the label, textarea and hint, while textAreaClassName is applied to the textarea element itself. In the same way, ref points to the wrapper and textAreaRef to the textarea.

Set hideRequiredIndicator to true. The field is still required for validation when isRequired is set, but the label no longer shows the required indicator.

Text editorsToggles