Skip to main content

​
Usage

import { Textarea } from '@kivora/react';

function Demo() {
  const [bio, setBio] = useState('');
  
  return (
    <Textarea 
      label="Bio" 
      value={bio}
      onChange={setBio}
      rows={4}
      placeholder="Tell us about yourself..."
    />
  );
}

​
Props

​
value
string
Controlled value of the textarea.
​
defaultValue
string
default:"''"
Default value for uncontrolled mode.
​
onChange
(value: string) => void
Called when the textarea value changes. Receives the string value directly.
​
placeholder
string
Placeholder text displayed when textarea is empty.
​
disabled
boolean
default:"false"
Disables the textarea and prevents user interaction.
​
readOnly
boolean
default:"false"
Makes the textarea read-only (value visible but not editable).
​
error
string
Error message to display below the textarea. When set, applies error styling.
​
label
string
Label text displayed above the textarea.
​
rows
number
default:"4"
Number of visible text rows (ignored when autosize is true).
​
autosize
boolean
default:"false"
Auto-grow to fit content. When enabled, height adjusts dynamically.
​
minRows
number
default:"2"
Minimum number of rows when autosize is enabled.
​
maxRows
number
default:"8"
Maximum number of rows when autosize is enabled.
​
className
string
default:"''"
Additional CSS classes to apply to the textarea element.
​
id
string
HTML ID attribute. Auto-generated if not provided.

​
Examples

​
Basic Textarea

<Textarea 
  label="Description" 
  placeholder="Enter description..."
  rows={6}
/>

​
Auto-Growing Textarea

<Textarea 
  label="Comments" 
  autosize 
  minRows={2} 
  maxRows={6}
  placeholder="Type your comment..."
/>

​
With Error State

<Textarea 
  label="Message" 
  value={message}
  onChange={setMessage}
  error="Message must be at least 10 characters"
/>

​
Controlled with Character Count

function CharCountDemo() {
  const [text, setText] = useState('');
  const maxChars = 200;
  
  return (
    <div>
      <Textarea 
        label="Tweet"
        value={text}
        onChange={setText}
        rows={3}
        error={text.length > maxChars ? 'Too many characters' : undefined}
      />
      <p className="text-sm text-muted-foreground mt-1">
        {text.length}/{maxChars}
      </p>
    </div>
  );
}

​
Disabled and Read-Only

<Textarea label="Disabled" disabled rows={3} />
<Textarea label="Read Only" readOnly value="This text cannot be edited" />

​
Notes

  • Auto-resize functionality only works when autosize={true}
  • When autosize is enabled, the rows prop is ignored
  • Resize is disabled when autosize is true (resize: none)
  • Min/max rows control height constraints in autosize mode
  • Focus states include visible ring for accessibility

Build docs developers (and LLMs) love

Get started for freeTalk to us