Skip to main content

​
Textarea

A multi-line text input field built on Base UI’s Input primitive.

​
Base UI Primitive

Built on @base-ui/react/input with render={<textarea />}

​
Import

import { Textarea } from "@soft-ui/react/textarea"

​
Usage

import { Textarea } from "@soft-ui/react/textarea"

export default function Example() {
  return (
    <Textarea 
      placeholder="Enter your message..."
      rows={4}
    />
  )
}

​
Props

​
size
's' | 'm' | 'l'
default:"'m'"
Control size. Affects padding.
  • s: 10px horizontal, 8px vertical padding
  • m: 12px horizontal, 10px vertical padding
  • l: 12px horizontal, 12px vertical padding
​
variant
'secondary' | 'tertiary'
default:"'secondary'"
Visual style variant.
  • secondary: Solid background
  • tertiary: Glass-morphic with backdrop blur
​
rows
number
default:"3"
Number of visible text rows.
​
resize
'none' | 'vertical' | 'horizontal' | 'both'
default:"'vertical'"
Resize behavior.
  • none: Not resizable
  • vertical: Vertically resizable
  • horizontal: Horizontally resizable
  • both: Both directions
​
focusVisibleOnly
boolean
default:"true"
Only show focus ring on keyboard navigation (not mouse clicks).
​
disabled
boolean
Disables the textarea and applies disabled styles.
​
placeholder
string
Placeholder text shown when textarea is empty.
​
value
string
Controlled value.
​
defaultValue
string
Uncontrolled default value.
​
onChange
(event: React.ChangeEvent<HTMLTextAreaElement>) => void
Callback fired when value changes.
​
className
string
Additional CSS classes for the container.
​
unsafeClassName
string
Explicit escape hatch for intentional structural overrides.

​
Examples

​
Basic

import { Textarea } from "@soft-ui/react/textarea"

export default function Basic() {
  return (
    <Textarea 
      placeholder="Enter your message..."
      rows={4}
    />
  )
}

​
Sizes

import { Textarea } from "@soft-ui/react/textarea"

export default function Sizes() {
  return (
    <div className="flex flex-col gap-4">
      <Textarea size="s" placeholder="Small" />
      <Textarea size="m" placeholder="Medium" />
      <Textarea size="l" placeholder="Large" />
    </div>
  )
}

​
Resize Options

import { Textarea } from "@soft-ui/react/textarea"

export default function ResizeOptions() {
  return (
    <div className="flex flex-col gap-4">
      <Textarea resize="none" placeholder="Not resizable" />
      <Textarea resize="vertical" placeholder="Vertical only" />
      <Textarea resize="both" placeholder="Both directions" />
    </div>
  )
}

Build docs developers (and LLMs) love

Get started for freeTalk to us