Textarea
A Textarea component is an input field that allows users to enter multi-line text. It provides a larger area for text input compared to a standard text input field, making it ideal for comments, feedback, or any scenario where users need to provide detailed information. Textareas can be resized, styled, and configured to support features like character limits, placeholders, and auto-resizing to enhance user experience.
Rendered live, with the same build of the library you install.
Textarea.tsx
import React, { useState } from 'react';import { NTextarea } from '@nayan-ui/react';const Textarea = () => {const [value, setValue] = useState('');return (<div><NTextarealabel="Message"placeholder="Type your message here..."value={value}onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}/></div>);};export default Textarea;
| Name | Type | Default | Details |
|---|---|---|---|
| id | string | Optional | You can pass id to create unique identifier. |
| label | React.ReactNode | Optional | Label for the textarea. |
| labelClassName | string | ' ' | You can customise by passing tailwind classes. |
| textareaClassName | string | ' ' | You can customise by passing tailwind classes. |
| className | string | ' ' | You can customise by passing tailwind classes. |
| error | React.ReactNode | Optional | Error message to display. |
| helperText | React.ReactNode | Optional | Helper text to display. |
| onChange | (e: React.ChangeEvent<HTMLTextAreaElement>) => void | Optional | Change event handler. |
Other components solving nearby problems.
- React Textarea
- React Multiline Input
- React Textarea Component
- React Autoresizing Textarea
- Custom Textarea in React
- React Textarea with Hooks
- Controlled Textarea in React
- Uncontrolled Textarea in React
- Textarea Validation in React
- React Textarea Autocomplete
- Responsive React Textarea
- Example Textarea in React
- Styling React Textarea
- Textarea Placeholder in React
- Resizable Textarea in React
- ARIA Accessibility for React Textarea
- Character Count in React Textarea
- OnChange Event for React Textarea
- Default Value in React Textarea
- Limited Input Textarea in React
- Error Message for React Textarea