Text Area

A multi-line input field in a user interface that allows users to enter larger amounts of text. It is often used in forms where users need to provide lengthy information, such as comments, reviews, or descriptions.

import {QTextArea} from "@qui/react"

Examples

Showcase

Customize size using the size property.

Small (s)

Medium (m)

Large (l)

import {ReactNode} from "react"

import {QTextArea} from "@qui/react"

export default function Showcase(): ReactNode {
  return (
    <div className="grid grid-cols-[160px,auto] items-center justify-center gap-4 py-1">
      <div className="text-primary q-font-heading-xs">Small (s)</div>
      <QTextArea
        className="flex overflow-auto"
        placeholder="Start Typing..."
        size="s"
      />

      <div className="text-primary q-font-heading-xs">Medium (m)</div>
      <QTextArea
        className="flex overflow-auto"
        placeholder="Start Typing..."
        size="m"
      />

      <div className="text-primary q-font-heading-xs">Large (l)</div>
      <QTextArea
        className="flex overflow-auto"
        placeholder="Start Typing..."
        size="l"
      />
    </div>
  )
}

Customization

Use the label, hint, and error props to describe the element.

Supply counter to display the current character count.

Label0

Hint

Custom Label0

Custom Hint

Label0

Error

import {ReactNode} from "react"

import {QTextArea} from "@qui/react"

export default function Customization(): ReactNode {
  return (
    <div className="grid justify-center gap-y-5">
      <div className="flex overflow-auto">
        <QTextArea
          counter
          hint="Hint"
          label="Label"
          placeholder="Start Typing..."
          wrap="hard"
        />
      </div>
      <div className="flex overflow-auto">
        <QTextArea
          counter
          hint={
            <span className="text-primary q-font-metadata-sm">Custom Hint</span>
          }
          label={
            <span className="text-primary q-font-heading-xxs">
              Custom Label
            </span>
          }
          placeholder="Start Typing..."
          wrap="hard"
        />
      </div>
      <div className="flex overflow-auto">
        <QTextArea
          counter
          error="Error"
          label="Label"
          placeholder="Start Typing..."
          wrap="hard"
        />
      </div>
    </div>
  )
}

States

Supply disabled or readOnly to disable interactions.

Disabled

Label

Error

About

This is a required field

Read Only

Label

import {ReactNode} from "react"

import {QTextArea} from "@qui/react"

export default function Showcase(): ReactNode {
  return (
    <div className="grid grid-cols-[160px,auto] items-center justify-center gap-4 py-1">
      <div className="text-primary q-font-heading-xs">Disabled</div>
      <div className="flex overflow-auto">
        <QTextArea disabled label="Label" placeholder="Start Typing..." />
      </div>

      <div className="text-primary q-font-heading-xs">Error</div>
      <div className="flex overflow-auto">
        <QTextArea
          error="This is a required field"
          label="About"
          placeholder="Write about yourself..."
        />
      </div>

      <div className="text-primary q-font-heading-xs">Read Only</div>
      <div className="flex overflow-auto">
        <QTextArea label="Label" placeholder="Start Typing..." readOnly />
      </div>
    </div>
  )
}

Input Customization

Use inputProps to pass properties to the underlying <input> element. The following textarea features a maximum of 15 characters or 10 rows.

Label0

import {ReactNode} from "react"

import {QTextArea} from "@qui/react"

export default function InputProps(): ReactNode {
  return (
    <div className="flex overflow-auto">
      <QTextArea
        counter
        inputProps={{cols: 50, rows: 10}}
        label="Label"
        placeholder="Start Typing..."
      />
    </div>
  )
}

Controlled

The component can be controlled or uncontrolled.

When you supply the onChange and value props, the component is controlled. Otherwise, the component is uncontrolled and the value is tracked internally.

Learn more about controlled and uncontrolled components in the related React Documentation.

Controlled

Hint

Uncontrolled

Hint

import {ReactNode, useState} from "react"

import {QTextArea} from "@qui/react"

export default function Controlled(): ReactNode {
  const [value, setValue] = useState("foo")

  return (
    <div className="grid justify-center gap-y-5">
      <div className="flex overflow-auto">
        <QTextArea
          hint="Hint"
          label="Controlled"
          onChange={(event, value) => {
            setValue(value)
          }}
          placeholder="Start Typing..."
          value={value}
        />
      </div>

      <div className="flex overflow-auto">
        <QTextArea
          defaultValue="bar"
          hint="Hint"
          label="Uncontrolled"
          placeholder="Start Typing..."
        />
      </div>
    </div>
  )
}

API

Props

Name & Description	Option(s)	Default
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'div'
autoFocus If `true`, React will focus the component on mount.	boolean
className The className property of the Element interface gets and sets the value of the class attribute of the specified element.	string
counter Maximum number of characters for this text area element.	boolean	false
defaultValue Default input value.	string
disabled If true, the component will not be interactive and will appear dimmed.	boolean	false
error Optional error, triggers the invalid style variant if supplied. This element is automatically associated with the component's input element for optimal accessibility.	ReactNode
form Specifies the id of the `<form>` this input belongs to. If omitted, it’s the closest parent form.	string
hint Optional hint describing the element. This element is automatically associated with the component's input element for optimal accessibility.	ReactNode
id Controlled id. If omitted, a unique identifier will be automatically generated for error, label, and hint accessibility.	string
inputProps attributes applied to the `input` element.	TextareaHTMLAttributes<HTMLTextAreaElement>	{}
inputRef Pass a ref to the textarea element.	Ref<HTMLTextAreaElement>
label Optional label describing the element. Recommended. This element is automatically associated with the component's input element for optimal accessibility.	ReactNode
name Specifies the name for this input that’s submitted with the form.	string
onBlur An Event handler function. Fires when the input element loses focus.	FocusEventHandler<HTMLTextAreaElement>
onChange Callback fired when the input value changes. eventthe DOM event associated with the change. valuethe updated value.	( event: SyntheticEvent, value: T, ) => void
onFocus An Event handler function. Fires when the input element gains focus.	FocusEventHandler<HTMLTextAreaElement>
placeholder HTML placeholder attribute.	string
readOnly If true, the component is not editable by the user.	boolean	false
resize HTML resize attribute.	\| 'none' \| 'both' \| 'horizontal' \| 'vertical' \| 'initial' \| 'inherit'	"both"
size Size of the element, label, hint, and error messages. When these properties are supplied as templates, size styles are omitted.	\| 's' \| 'm' \| 'l'
style The style global attribute contains CSS styling declarations to be applied to the element.	CSSProperties
value Controlled input value.	T
wrap HTML wrap attribute.	\| 'soft' \| 'hard'	"soft"

Type

| ElementType
| ComponentType

Default

'div'

Description

The component used for the root node. It can be a React component or element.

autoFocus

Type

boolean

Description

If true, React will focus the component on mount.

className

Type

string

Description

The className property of the Element interface gets and sets the value of the class attribute of the specified element.

counter

Type

boolean

Default

false

Description

Maximum number of characters for this text area element.

defaultValue

Type

string

Description

Default input value.

disabled

Type

boolean

Default

false

Description

If true, the component will not be interactive and will appear dimmed.

error

Type

ReactNode

Description

Optional error, triggers the invalid style variant if supplied. This element is automatically associated with the component's input element for optimal accessibility.

form

Type

string

Description

Specifies the id of the <form> this input belongs to. If omitted, it’s the closest parent form.

hint

Type

ReactNode

Description

Optional hint describing the element. This element is automatically associated with the component's input element for optimal accessibility.

Type

string

Description

Controlled id. If omitted, a unique identifier will be automatically generated for error, label, and hint accessibility.

inputProps

Type

TextareaHTMLAttributes<HTMLTextAreaElement>

Default

{}

Description

attributes applied to the input element.

inputRef

Type

Ref<HTMLTextAreaElement>

Description

Pass a ref to the textarea element.

label

Type

ReactNode

Description

Optional label describing the element. Recommended. This element is automatically associated with the component's input element for optimal accessibility.

name

Type

string

Description

Specifies the name for this input that’s submitted with the form.

onBlur

Type

FocusEventHandler<HTMLTextAreaElement>

Description

An Event handler function. Fires when the input element loses focus.

onChange

Type

(
  event: SyntheticEvent,
  value: T,
) => void

Description

Callback fired when the input value changes.

eventthe DOM event associated with the change.
valuethe updated value.

onFocus

Type

FocusEventHandler<HTMLTextAreaElement>

Description

An Event handler function. Fires when the input element gains focus.

placeholder

Type

string

Description

HTML placeholder attribute.

readOnly

Type

boolean

Default

false

Description

If true, the component is not editable by the user.

resize

Type

| 'none'
| 'both'
| 'horizontal'
| 'vertical'
| 'initial'
| 'inherit'

Default

"both"

Description

HTML resize attribute.

size

Type

| 's'
| 'm'
| 'l'

Description

Size of the element, label, hint, and error messages. When these properties are supplied as templates, size styles are omitted.

style

Type

CSSProperties

Description

The style global attribute contains CSS styling declarations to be applied to the element.

value

Type

Description

Controlled input value.

wrap

Type

| 'soft'
| 'hard'

Default

"soft"

Description

HTML wrap attribute.

Tag

Text Input