Textarea

Usage

import { Textarea } from '@zalify-ui/react'

<Textarea placeholder="Enter your message" />

Examples

Variants

Use the variant prop to change the visual style of the textarea.

Sizes

Use the size prop to change the size of the textarea.

Resize

Use the resize prop to control the resize behavior of the textarea.

To limit the maximum height (or rows) of the textarea, we recommend using the maxHeight prop and setting the value to a lh unit.

<Textarea maxH="5lh" />

Autoresize

Use the autoresize prop to make the textarea autoresize vertically as you type.

Field

Compose the textarea with the Field component to add a label, helper text, and error message.

Required

Pass the required prop to Field.Root and use the Field.RequiredIndicator to indicate that the textarea is required.

Invalid

Pass the invalid prop to the Field.Root and use the Field.ErrorText to indicate that the textarea is invalid.

Ref

Here's how to access the underlying element reference

'use client'
import { useRef } from 'react'
import { Textarea } from '@zalify-ui/react'

export const App = () => {
  const ref = useRef<HTMLTextAreaElement>(null)
  return <Textarea ref={ref} />
}

Props