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.

Demo

Rendered live, with the same build of the library you install.

Usage

Textarea.tsx
import React, { useState } from 'react';
import { NTextarea } from '@nayan-ui/react';
const Textarea = () => {
const [value, setValue] = useState('');
return (
<div>
<NTextarea
label="Message"
placeholder="Type your message here..."
value={value}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}
/>
</div>
);
};
export default Textarea;

Attributes

8 props
NameTypeDefaultDetails
idstringOptionalYou can pass id to create unique identifier.
labelReact.ReactNodeOptionalLabel for the textarea.
labelClassNamestring' 'You can customise by passing tailwind classes.
textareaClassNamestring' 'You can customise by passing tailwind classes.
classNamestring' 'You can customise by passing tailwind classes.
errorReact.ReactNodeOptionalError message to display.
helperTextReact.ReactNodeOptionalHelper text to display.
onChange(e: React.ChangeEvent<HTMLTextAreaElement>) => voidOptionalChange event handler.

Tags

Other components solving nearby problems.