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

Your MessagePlease provide your 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:

tsx

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:

Textarea value: Empty

tsx

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:

tsx

1<Textarea variant='primary' placeholder="Type something..." />

Rounded

Define the border radius using the rounded prop:

tsx

1<Textarea rounded='md' placeholder="Type something..." />

Label

Add a label to the Textarea using the label prop:

Message

tsx

1<Textarea label="Message" placeholder="Enter your message" />

Font Weight

Change the font weight of the Textarea content using the fontWeight prop:

tsx

1<Textarea fontWeight='normal' placeholder="Type something..." />

Disabled

Disable the Textarea using the disabled prop:

tsx

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:

Label: