TextArea
The TextArea component is designed for multi-line text input, providing users with an area to enter larger amounts of text. It features a flexible and resizable interface that adapts to user input
Installation
Install the package
npm i @start-base/react-form-elementsAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/react-form-elements/styles.css";Import the component
import TextArea from '@start-base/react-form-elements/TextArea';Usages
Text Area Component Label
Text Area Component Placeholder
Text Area Component Placeholder And Label
Text Area Component Resizable
Text Area Component Disable Shrink
Text Area Component Error
Error Message
API
A textarea component with optional auto-grow functionality.
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | Name of the input | |
| label | string | null | Label of the input |
| placeholder | string | null | Placeholder of the input |
| disableShrink | boolean | false | Position the label outside of the input |
| value | string or number | Value of the input | |
| onChange | function | Callback function that is fired when the value changes. | |
| inputClassName | string | null | Classname for input element |
| labelClassName | string | null | Classname for label element |
| errorClassName | string | null | Classname for error element |
| disabled | boolean | false | Disable the input |
| error | string or boolean or object | null | Error message to display below the input. if value is a boolean input border will be change. Also you can pass schema validator error objects. |
| autoGrow | boolean | false | Auto grow textarea |