Textarea Component

The Textarea component is a modern, flexible multiline input built for real-world applications. It supports auto-resizing behavior, ChatGPT-like input handling with Enter-to-submit support, character counting, validation states, and full styling customization. Designed for chat apps, forms, and content-heavy inputs.

Import Component From Library

tsx

1import { Textarea } from "@neuctra/ui";

Basic Usage Code

tsx

1<Textarea
2  label="Description"
3  placeholder="Enter text..."
4/>

Basic Usage

Description

Auto Resize (Core Feature)

Automatically grows with content like modern chat apps. Stops at a max height and becomes scrollable.

Chat-style Input (Enter to Send)

Behaves like ChatGPT: press Enter to submit, Shift + Enter for new line.

Validation States

Comment

This field is required

Success

Looks good!

Character Limit

0/120

Custom Styling

Styled

Props Table

Prop	Type	Default	Description
label	string	—	Optional label displayed above the textarea.
icon	React.ElementType	—	Icon displayed next to the label.
helperText	string	—	Helper or validation message shown below.
error	boolean	false	Applies error styles (destructive border/text).
success	boolean	false	Applies success styles (primary border).
maxLength	number	—	Maximum character limit. Shows counter when used.
autoResize	boolean	true	Enables dynamic height resizing based on content.
minRows	number	3	Minimum visible rows when autoResize is enabled.
maxRows	number	6	Maximum rows before vertical scroll appears.
submitOnEnter	boolean	false	Press Enter to submit. Use Shift + Enter for newline.
onSubmit	() => void	—	Callback triggered when submitting via Enter.
className	string	—	Custom classes for textarea element.
containerClassName	string	—	Classes for outer wrapper.
labelClassName	string	—	Custom label styling.
iconClassName	string	—	Custom styling for the label icon.
helperClassName	string	—	Custom helper text styling.
countClassName	string	—	Custom character counter styling.
style	CSSProperties	—	Inline styles for textarea.
containerStyle	CSSProperties	—	Inline styles for container.
labelStyle	CSSProperties	—	Inline styles for label.
helperStyle	CSSProperties	—	Inline styles for helper text.
countStyle	CSSProperties	—	Inline styles for character counter.
...rest	React.TextareaHTMLAttributes<HTMLTextAreaElement>	—	All native textarea props (value, onChange, placeholder, etc).

Common Mistakes

<Textarea rows="5" />

Avoid rows when using autoResize.

<Textarea maxRows={6} />

Use minRows / maxRows instead.

Frequently Asked Questions

How do I install and import the Textarea component?

Install the @neuctra/ui package, then import it with: import { Textarea } from "@neuctra/ui";

Can I customize the Textarea component's appearance?

Yes. Textarea accepts a className prop for custom Tailwind CSS classes, so you can adjust spacing, layout, and styling without overriding the component internals.

Is the Textarea component accessible?

Textarea is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.