Textarea

atom

Multi-line text field with optional auto-resize, character count, and three sizes. Ideal for bios, notes, and any open-ended text input.

"Add a Textarea from lucent-ui with label, autoResize, and a 280-character limit with a character counter."

Usage

React / JSX

import { Textarea } from 'lucent-ui'

<Textarea label="Textarea" placeholder="Textarea" size="md" />

pnpm add lucent-ui

Textarea props — * required

Prop	Type	Default	Description
`label`	`string`	—	Label displayed above the textarea.
`placeholder`	`string`	—	Hint text when the field is empty.
`value`	`string`	—	Controlled value.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Height, font size, and padding scale.
`autoResize`	`boolean`	`false`	Grows the textarea height as content is added.
`maxLength`	`number`	—	Character limit. Used with showCount to display a counter.
`showCount`	`boolean`	`false`	Displays remaining character count when maxLength is set.
`helperText`	`string`	—	Hint or description below the textarea.
`errorText`	`string`	—	Error message; triggers the error visual state.
`disabled`	`boolean`	`false`	Prevents interaction.
`onChange`	`(e: React.ChangeEvent<HTMLTextAreaElement>) => void`	—	Change event handler.