Textarea
Import
import { Textarea } from "@vivakits/react-components";Variant
The Textarea component comes with 2 different variants that you can change it using the variant prop.
Size
The Textarea component comes with 6 different sizes that you can change it using the size prop.
Color
The Textarea component comes with 6 different colors that you can change it using the color prop. It has both solid and outline variant.
Rounded
The shape of the Textarea component can be updated using rounded prop.
Error
Conditional error handling for Textarea can be done via hasError props. Error message can also be modified via errorMessage props.
Invalid input value
Custom error message
Others
The Textarea component offers various configuration options to handle different use cases.
API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| vairant | solidoutline | Changes Textarea appreance | solid |
| color | primarysecondaryaccentsuccesswarningdanger | Changes Textarea color | primary |
| size | smmdlgxl | Changes Textarea size | md |
| rounded | defaultnonexssmmdlgfulll | Changes the border radius of Textarea | primary |
| placeholder | string | Place a text inside the Textarea box | - |
| label | string | label of the Textarea box | - |
| labelPosition | startendhorizontal | Determine the position of the label of Textarea box | start |
| labelClassName | string | Changes style of the label of Textarea box | - |
| hasError | boolean | Shows error | false |
| errorMessage | string | Modify the error message | Invalid Textarea value |
| wrapperClassName | string | Customize the appearance of the textarea container | - |
| className | string | Customize the appearance of the textarea element | - |