Textarea

Multi-line text input with auto-resize and character count.

Basic Usage

import { Textarea } from '@airo-ui/react'
import { useState } from 'react'

function Demo() {
  const [value, setValue] = useState('')

  return (
    <Textarea
      value={value}
      onChange={(e) => setValue(e.target.value)}
      label="Message"
      placeholder="Say something..."
      rows={3}
    />
  )
}

Auto-resize + Character Count

With autosize, the textarea grows automatically. Use minRows / maxRows to set limits.

<Textarea
  value={value}
  onChange={(e) => setValue(e.target.value)}
  label="Auto-resize"
  autosize={{ minRows: 2, maxRows: 6 }}
  maxlength={200}
  showCount
/>

API

Props

Name	Type	Default	Description
value	string	--	Controlled value
defaultValue	string	''	Default value (uncontrolled)
placeholder	string	--	Placeholder text
disabled	boolean	false	Disabled
readonly	boolean	false	Read-only
error	boolean	false	Error state
errorMessage	string	--	Error message text
label	string	--	Top label
rows	number	3	Initial rows
maxlength	number	--	Max characters
showCount	boolean	false	Show character count
autosize	boolean | { minRows?: number; maxRows?: number }	false	Auto-resize options
onChange	(e: ChangeEvent<HTMLTextAreaElement>) => void	--	Value change handler
onFocus	(e: FocusEvent<HTMLTextAreaElement>) => void	--	Focus handler
onBlur	(e: FocusEvent<HTMLTextAreaElement>) => void	--	Blur handler