Skip to content
Paramanu v0.1.0-alpha.0

Textarea

The Textarea component provides a multi-line text input with configurable resize behavior, variants, and sizes.

Basic Usage

import { Textarea } from "@paramanu/forms-react"


export default function App() {
  return <Textarea placeholder="Enter text..." rows={3} />
}
<textarea class="pm-textarea pm-textarea--outline pm-textarea--md pm-textarea--resize-vertical" rows="3" placeholder="Enter text..."></textarea>

Variants

import { Textarea } from "@paramanu/forms-react"


export default function App() {
  return (
    <>
      <Textarea variant="outline" placeholder="Outline" />
      <Textarea variant="filled" placeholder="Filled" />
      <Textarea variant="unstyled" placeholder="Unstyled" />
    </>
  )
}
<textarea class="pm-textarea pm-textarea--outline pm-textarea--md pm-textarea--resize-vertical" placeholder="Outline"></textarea>
<textarea class="pm-textarea pm-textarea--filled pm-textarea--md pm-textarea--resize-vertical" placeholder="Filled"></textarea>

Resize Options

import { Textarea } from "@paramanu/forms-react"


export default function App() {
  return (
    <>
      <Textarea resize="none" placeholder="No resize" />
      <Textarea resize="vertical" placeholder="Vertical" />
      <Textarea resize="both" placeholder="Both" />
    </>
  )
}
<textarea class="pm-textarea pm-textarea--outline pm-textarea--md pm-textarea--resize-none" placeholder="No resize"></textarea>
<textarea class="pm-textarea pm-textarea--outline pm-textarea--md pm-textarea--resize-vertical" placeholder="Vertical"></textarea>
<textarea class="pm-textarea pm-textarea--outline pm-textarea--md pm-textarea--resize-both" placeholder="Both"></textarea>