Textarea

The Textarea component provides you with multi-line text fields.

Import

import { Textarea } from '@nostromo/ui-core'
// or
import { Textarea } from '@nostromo/ui-core/textarea'

Usage

import { Textarea, Label } from '@nostromo/ui-core'
 
export default function Example() {
  const [value, setValue] = React.useState('')
  
  return (
    <div className="space-y-2">
      <Label htmlFor="message">Message</Label>
      <Textarea
        id="message"
        placeholder="Enter your message..."
        value={value}
        onChange={(e) => setValue(e.target.value)}
        rows={4}
      />
    </div>
  )
}

Live Examples

Live Example

☀️

Copy

Storybook →

View Code

import { Textarea } from '@nostromo/ui-core' export default function TextareaExample() { return ( <div className="space-y-4"> <Textarea placeholder="Type your message here..." /> <Textarea placeholder="Large textarea" rows={6} /> </div> ) }...

With Label

Live Example

☀️

Copy

Storybook →

View Code

import { Textarea, Label } from '@nostromo/ui-core' export default function TextareaWithLabel() { return ( <div className="space-y-2"> <Label htmlFor="message">Message</Label> <Textarea id="message" placeholder="Your message..." /> </div> ) }...

Props

Prop	Type	Default	Required	Description
`variant`	`"default" \| "error" \| "success"`	`"default"`	No	Visual variant (auto-set based on error/success)
`size`	`"sm" \| "default" \| "lg"`	`"default"`	No	Size of the textarea
`label`	`string`	`undefined`	No	Label text displayed above textarea
`helperText`	`string`	`undefined`	No	Helper text displayed below textarea
`error`	`boolean`	`false`	No	Whether the textarea has an error state
`required`	`boolean`	`false`	No	Whether the textarea is required
`autoResize`	`boolean`	`true`	No	Whether textarea automatically resizes
`placeholder`	`string`	`undefined`	No	Placeholder text
`rows`	`number`	`3`	No	Number of visible rows
`disabled`	`boolean`	`false`	No	Whether the textarea is disabled
`value`	`string`	`undefined`	No	Controlled textarea value
`defaultValue`	`string`	`undefined`	No	Default value (uncontrolled)
`onChange`	`(event: React.ChangeEvent<HTMLTextAreaElement>) => void`	`undefined`	No	Change event handler
`id`	`string`	`undefined`	No	Textarea ID (auto-generated if not provided)
`name`	`string`	`undefined`	No	Textarea name for form submission
`maxLength`	`number`	`undefined`	No	Maximum character length
`minLength`	`number`	`undefined`	No	Minimum character length
`readOnly`	`boolean`	`false`	No	Whether the textarea is read-only
`className`	`string`	`undefined`	No	Additional CSS classes

Standard HTML Textarea Props

The Textarea component extends all standard HTML textarea attributes, including:

autoComplete, autoFocus, cols, form, wrap
aria-* attributes for accessibility
data-* attributes for custom data
All other standard HTML textarea attributes

Input Checkbox