Textarea

Below is the full output of the Textarea component across all variants and sizes.

“Its Important to install the packages & Dependencies to use can intall using npm install zure-ui and also paste code maunally For both React & Next Js “

1. Variants

These define the intent and visual weight of the Textarea.

Preview

2. Sizes

We have provided 3 sizes sm , md & lg.

Preview

3. Example

Made an example for better understanding in which you an take Input and fetch

Important Note “I have used tailwindcss you can use normal CSS for text color”

Preview

Your Message

Live Preview

Typed content will appear here…

Props

Prop	Type	Default	Description
`label`	`string`	—	Label text displayed above the textarea
`value`	`string`	—	Controlled value of the textarea
`onChange`	`(event: React.ChangeEvent<HTMLTextAreaElement>) => void`	—	Callback fired when the textarea value changes
`placeholder`	`string`	`" "`	Placeholder text shown when empty
`variant`	`"default" \| "outline" \| "filled"`	`"default"`	Visual style variant of the textarea
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the textarea
`color`	`string`	`"#000"`	Text and border color
`error`	`boolean`	`false`	Displays error state styling
`disabled`	`boolean`	`false`	Disables the textarea
`rows`	`number`	`4`	Number of visible text lines
`resize`	`"none" \| "vertical" \| "horizontal" \| "both"`	`"vertical"`	Controls resize behavior
`className`	`string`	`""`	Additional Tailwind / CSS classes
`...props`	`TextareaHTMLAttributes<HTMLTextAreaElement>`	—	Pass-through native textarea props

Installation

You can Integrate Zure UI By 2 ways npm install zure-ui Or by Manually creating folder , files & paste the given code It Totally depends on your workflow.

NPM

Step 1: Create a React App

Open your terminal and run the following command to create a new React app:


npx create-react-app my-app

Step 2: Navigate to Your Project Directory

After creating your project, navigate to your project directory:


cd my-app

Step 3: Install the Package

Run the following command in your project root to add the library as a dependency.


npm install zure-ui

Step 4: Start Building

You can now import any component directly into your React files.

Textarea.jsx


import {Textarea} from "zure-ui";
 
export default function Textarea() {
 
 
return (
<>
<Textarea value="sm" size="sm"   variant="outline" />
<Textarea value="md" size="md"   variant="outline"/>
<Textarea value="lg" size="lg"   variant="outline"/>
</>
);
}

Manual

Step 1: Create a Components Directory

Ensure you have a dedicated folder for UI components (e.g., src/components/ui).

Step 2: Create the Component Folder

For each component you want to use, create a new folder named after the component.

- - - - Textarea.jsx
      - Textarea.module.css
      - index.js
- App.js

Step 3: Add the Three Core Files

Inside that new folder, create these three files and paste the code provided in the component’s documentation:

Textarea.jsx (The Logic)
Textarea.module.css (The Styles)
index.js (The Export)

Step 4: Paste in Textarea.jsx

React JS

Textarea.jsx


import styles from "./textarea.module.css";
 
export const Textarea = ({
  label,
  value,
  onChange,
  placeholder = " ",
  variant = "default",
  size = "md",
  color = "#000",
  error = false,
  disabled = false,
  rows = 4,
  resize = "vertical",
  className = "",
  ...props
}) => {
  return (
    <div
      className={`${styles.wrapper} ${className}`}
      style={{ "--zure-color": error ? "red" : color }}
    >
      <textarea
        className={`${styles.textarea} ${styles[variant]} ${styles[size]} ${styles[resize]}`}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        disabled={disabled}
        rows={rows}
        aria-invalid={error}
        {...props}
      />
      {label && <label className={styles.label}>{label}</label>}
    </div>
  );
};

Step 5: Paste in textarea.module.css

textarea.module.css


.wrapper {
position: relative;
width: 100%;
--zure-color: #000;
}
 
/* Textarea base */
.textarea {
width: 100%;
border-radius: 8px;
border: 1.5px solid #d1d5db;
padding: 0.6rem 0.8rem;
font-size: 0.9rem;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
font-family: inherit;
}
 
/* Focus */
.textarea:focus {
border-color: var(--zure-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--zure-color) 20%, transparent);
}
 
/* Floating label */
.label {
position: absolute;
left: 0.7rem;
top: 0.7rem;
background: white;
padding: 0 0.25rem;
font-size: 0.75rem;
color: #6b7280;
pointer-events: none;
transition: 0.2s ease;
}
 
/* Float label */
.textarea:focus + .label,
.textarea:not(:placeholder-shown) + .label {
top: -0.45rem;
font-size: 0.7rem;
color: var(--zure-color);
}
 
/* Variants */
.default {
background: white;
}
 
.outline {
background: transparent;
border: 1.5px solid var(--zure-color);
}
 
.ghost {
background: transparent;
border: none;
border-bottom: 1.5px solid var(--zure-color);
border-radius: 0;
}
 
/* Sizes */
.sm {
font-size: 0.8rem;
padding: 0.4rem 0.6rem;
}
 
.md {
font-size: 0.9rem;
padding: 0.6rem 0.8rem;
}
 
.lg {
font-size: 1rem;
padding: 0.8rem 1rem;
}
 
/* Resize options */
.none {
resize: none;
}
 
.vertical {
resize: vertical;
}
 
.horizontal {
resize: horizontal;
}
 
.both {
resize: both;
}
 
/* Disabled */
.textarea:disabled {
opacity: 0.6;
cursor: not-allowed;
}

Step 6: Paste in index.js

index.js


export { Textarea } from "./Textarea";

Step 7: Local Usage

Import the component using your local path:

Textarea.jsx


import { Textarea } from './components/Textarea';

Step 8: Usage

Use the component

Textarea.jsx


<Textarea placeholder="outline" variant="outline" />
<Textarea placeholder="default" variant="default" />
<Textarea placeholder="ghost" variant="ghost" />

Textarea

1. Variants

Preview

Use

2. Sizes

Preview

Use

3. Example

Preview

Use

Props

Installation

NPM

NPM

Step 1: Create a React App

Step 2: Navigate to Your Project Directory

Step 3: Install the Package

Step 4: Start Building

Manual

Manual

Step 1: Create a Components Directory

Step 2: Create the Component Folder

Step 3: Add the Three Core Files

Step 4: Paste in Textarea.jsx

React JS

Next JS

Step 5: Paste in textarea.module.css

Step 6: Paste in index.js

Step 7: Local Usage

Step 8: Usage