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

Please provide your feedback

Installation

To install only the Textarea component, run one of the following commands:

Using npm

sh
1npm install @vbss-ui/textarea

Using yarn

sh
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:

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

Font Size

Change the font size of the Textarea content using the fontSize prop:

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

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

PropTypeDescriptionDefault
variantprimary | secondary | outline | ghostDefines the visual style of the Textarea.primary
roundednone | sm | md | lg | fullSets the border radius of the Textarea.md
fontSizexs | sm | md | lg | xlSets the font size of the Textarea content.md
fontWeightthin | light | normal | medium | bold | extraboldSpecifies the font weight of the Textarea content.normal
labelstringText label for the Textarea.-
errorstringError message to display.-
disabledbooleanDisables the Textarea interaction.false
refReact.RefAllows accessing the underlying DOM element.-
classNamestringAdditional CSS classes for custom styling.-
styleReact.CSSPropertiesAdditional 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: