Textarea
A customizable and accessible multi-line text input component.
The Textarea component is a form control for multi-line text input that supports various styling options, labels, and accessibility features. Built with flexibility in mind, it provides a clean and modern interface for text input with customizable appearance and behavior.
Send Feedback
Installation
To install only the Textarea component, run one of the following commands:
Using npm
1npm install @vbss-ui/textarea
Using yarn
1yarn add @vbss-ui/textarea
Usage
After installation, import the component and use it in your project:
1import { Textarea } from "@vbss-ui/textarea"
2
3export const App = () => {
4 return <Textarea placeholder="Enter your message" />
5}
State Management
The Textarea component can be controlled using React state:
1import { useState } from "react"
2import { Textarea } from "@vbss-ui/textarea"
3
4export const App = () => {
5 const [value, setValue] = useState("")
6
7 return (
8 <Textarea
9 value={value}
10 onChange={(e) => setValue(e.target.value)}
11 placeholder="Type something..."
12 />
13 )
14}
Variant
Change the visual style of the Textarea using the variant
prop:
1<Textarea variant='primary' placeholder="Type something..." />
Rounded
Define the border radius using the rounded
prop:
1<Textarea rounded='md' placeholder="Type something..." />
Label
Add a label to the Textarea using the label
prop:
1<Textarea label="Message" placeholder="Enter your message" />
Font Size
Change the font size of the Textarea content using the fontSize
prop:
1<Textarea fontSize='md' placeholder="Type something..." />
Font Weight
Change the font weight of the Textarea content using the fontWeight
prop:
1<Textarea fontWeight='normal' placeholder="Type something..." />
Disabled
Disable the Textarea using the disabled
prop:
1<Textarea disabled />
Props
Prop | Type | Description | Default |
---|---|---|---|
variant | primary | secondary | outline | ghost | Defines the visual style of the Textarea. | primary |
rounded | none | sm | md | lg | full | Sets the border radius of the Textarea. | md |
fontSize | xs | sm | md | lg | xl | Sets the font size of the Textarea content. | md |
fontWeight | thin | light | normal | medium | bold | extrabold | Specifies the font weight of the Textarea content. | normal |
label | string | Text label for the Textarea. | - |
error | string | Error message to display. | - |
disabled | boolean | Disables the Textarea interaction. | false |
ref | React.Ref | Allows accessing the underlying DOM element. | - |
className | string | Additional CSS classes for custom styling. | - |
style | React.CSSProperties | Additional style for custom styling. | - |
Customization
You can extend the default styles by passing custom styles
names using className
or style
.
Using style
You can pass custom styles directly to the component:
Using className
You can use the default component classNames: