feat(input): add new textArea comp

README.md

@@ -86,6 +86,7 @@ import { Switch } from '@signozhq/ui';
 import { Table } from '@signozhq/ui';
 import { Tabs } from '@signozhq/ui';
 import { TextEllipsis } from '@signozhq/ui';
+import { Textarea } from '@signozhq/ui';
 import { Toaster } from '@signozhq/ui';
 import { Toggle } from '@signozhq/ui';
 import { ToggleGroup } from '@signozhq/ui';

apps/docs/stories/intro.mdx

@@ -90,6 +90,7 @@ import { Switch } from '@signozhq/ui';
 import { Table } from '@signozhq/ui';
 import { Tabs } from '@signozhq/ui';
 import { TextEllipsis } from '@signozhq/ui';
+import { Textarea } from '@signozhq/ui';
 import { Toaster } from '@signozhq/ui';
 import { Toggle } from '@signozhq/ui';
 import { ToggleGroup } from '@signozhq/ui';

apps/docs/stories/textarea.mdx

@@ -0,0 +1,72 @@
+import { Meta, Controls, Primary } from '@storybook/addon-docs/blocks';
+import * as TextareaStories from './textarea.stories';
+
+<Meta of={TextareaStories} />
+
+# Textarea
+
+Multi-line text input. Mirrors `Input` styling via shared tokens and exposes an `autoSize` mode that grows the field with content between optional `minRows`/`maxRows` bounds. Also available as `Input.TextArea` for Ant Design drop-in compatibility.
+
+## How to use
+
+### Basic usage
+
+```tsx
+import { Textarea } from '@signozhq/ui';
+
+export default function MyComponent() {
+	return <Textarea rows={4} placeholder="Write your feedback here..." />;
+}
+```
+
+### Controlled
+
+```tsx
+import { Textarea } from '@signozhq/ui';
+import { useState } from 'react';
+
+export default function MyComponent() {
+	const [value, setValue] = useState('');
+	return <Textarea value={value} onChange={(e) => setValue(e.target.value)} rows={4} />;
+}
+```
+
+### Auto-size
+
+Pass `autoSize` to grow the field with content. Use `{ minRows, maxRows }` to clamp; at `maxRows` the textarea scrolls internally.
+
+```tsx
+import { Textarea } from '@signozhq/ui';
+
+export default function MyComponent() {
+	return <Textarea autoSize={{ minRows: 1, maxRows: 6 }} placeholder="Grows with content..." />;
+}
+```
+
+### Validation status
+
+```tsx
+import { Textarea } from '@signozhq/ui';
+
+export default function MyComponent() {
+	return <Textarea status="error" rows={3} defaultValue="This value is invalid." />;
+}
+```
+
+### Drop-in AntD usage
+
+```tsx
+import { Input } from '@signozhq/ui';
+
+export default function MyComponent() {
+	return <Input.TextArea rows={4} placeholder="Enter notification message..." />;
+}
+```
+
+This following example shows the playground story:
+
+<Primary />
+
+## Textarea Props
+
+<Controls of={TextareaStories.Playground} />

apps/docs/stories/textarea.stories.tsx

@@ -0,0 +1,237 @@
+import { Textarea } from '@signozhq/ui';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+const meta: Meta<typeof Textarea> = {
+	title: 'Components/Textarea',
+	component: Textarea,
+	parameters: {
+		layout: 'fullscreen',
+		docs: {
+			description: {
+				component:
+					'Multi-line text input. Mirrors `Input` styling via shared tokens and exposes an `autoSize` mode that grows the field with content between optional `minRows`/`maxRows` bounds. Also available as `Input.TextArea` for Ant Design drop-in compatibility.',
+			},
+		},
+	},
+	argTypes: {
+		value: { control: 'text', table: { category: 'Form' } },
+		defaultValue: { control: 'text', table: { category: 'Form' } },
+		placeholder: { control: 'text', table: { category: 'Form' } },
+		rows: { control: 'number', table: { category: 'Layout' } },
+		cols: { control: 'number', table: { category: 'Layout' } },
+		autoSize: { control: false, table: { category: 'Layout' } },
+		size: {
+			control: 'inline-radio',
+			options: ['small', 'middle', 'large'],
+			table: { category: 'Appearance' },
+		},
+		status: {
+			control: 'inline-radio',
+			options: [undefined, 'error', 'warning'],
+			table: { category: 'Appearance' },
+		},
+		disabled: { control: 'boolean', table: { category: 'Behavior' } },
+		readOnly: { control: 'boolean', table: { category: 'Behavior' } },
+		required: { control: 'boolean', table: { category: 'Behavior' } },
+		maxLength: { control: 'number', table: { category: 'Behavior' } },
+		onChange: { control: false, table: { category: 'Events' } },
+	},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Textarea>;
+
+/* -------------------------------------------------------------------------- */
+/*  Shared layout helpers                                                     */
+/* -------------------------------------------------------------------------- */
+
+function Section({
+	title,
+	description,
+	children,
+}: {
+	title: string;
+	description?: string;
+	children: React.ReactNode;
+}) {
+	return (
+		<section className="space-y-3">
+			<header className="space-y-1">
+				<h3 className="text-sm font-medium text-vanilla-800 dark:text-vanilla-200">{title}</h3>
+				{description && (
+					<p className="text-xs text-vanilla-600 dark:text-vanilla-400">{description}</p>
+				)}
+			</header>
+			<div className="space-y-3">{children}</div>
+		</section>
+	);
+}
+
+function Field({
+	label,
+	hint,
+	children,
+}: {
+	label: string;
+	hint?: string;
+	children: React.ReactNode;
+}) {
+	return (
+		<label className="block space-y-1.5">
+			<span className="block text-xs font-medium text-vanilla-700 dark:text-vanilla-300">
+				{label}
+			</span>
+			{children}
+			{hint && (
+				<span className="block text-[11px] text-vanilla-500 dark:text-vanilla-500">{hint}</span>
+			)}
+		</label>
+	);
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Primary                                                                   */
+/* -------------------------------------------------------------------------- */
+
+/** Playground — explore every prop. */
+export const Playground: Story = {
+	args: {
+		rows: 4,
+		placeholder: 'Write your feedback here...',
+	},
+	render: (args) => (
+		<div className="p-8 max-w-md bg-background">
+			<Textarea {...args} />
+		</div>
+	),
+};
+
+/* -------------------------------------------------------------------------- */
+/*  Core props                                                                */
+/* -------------------------------------------------------------------------- */
+
+/** Basic — fixed-row textarea, the most common usage. */
+export const Basic: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story:
+					'Pass `rows` to set the visible row count. The user can drag the bottom-right corner to resize vertically.',
+			},
+		},
+	},
+	render: () => {
+		const [value, setValue] = useState('');
+		return (
+			<div className="p-8 max-w-md bg-background">
+				<Section title="Basic">
+					<Field label="Feedback" hint="rows={6}, controlled value.">
+						<Textarea
+							rows={6}
+							placeholder="Write your feedback here..."
+							value={value}
+							onChange={(e) => setValue(e.target.value)}
+						/>
+					</Field>
+					<p className="text-[11px] text-vanilla-500 dark:text-vanilla-500">
+						length: <code className="font-mono">{value.length}</code>
+					</p>
+				</Section>
+			</div>
+		);
+	},
+};
+
+/** States — default, disabled, readOnly. */
+export const States: Story = {
+	render: () => (
+		<div className="p-8 max-w-md bg-background">
+			<Section title="States" description="Same textarea, three interactive states.">
+				<Field label="Default">
+					<Textarea rows={3} placeholder="Type something..." />
+				</Field>
+				<Field label="Disabled" hint="Cannot be focused or edited.">
+					<Textarea rows={3} defaultValue="Locked content" disabled />
+				</Field>
+				<Field label="Read-only" hint="Can be selected but not edited.">
+					<Textarea rows={3} defaultValue="Read-only content" readOnly />
+				</Field>
+			</Section>
+		</div>
+	),
+};
+
+/** Sizes — `small` / `middle` / `large`. */
+export const Sizes: Story = {
+	render: () => (
+		<div className="p-8 max-w-md bg-background">
+			<Section title="Sizes">
+				<Field label="Small" hint='size="small"'>
+					<Textarea size="small" rows={2} defaultValue="Compact" />
+				</Field>
+				<Field label="Middle (default)" hint='size="middle"'>
+					<Textarea size="middle" rows={2} defaultValue="Default" />
+				</Field>
+				<Field label="Large" hint='size="large"'>
+					<Textarea size="large" rows={2} defaultValue="Roomy" />
+				</Field>
+			</Section>
+		</div>
+	),
+};
+
+/** Validation status — `error` and `warning`. */
+export const Status: Story = {
+	render: () => (
+		<div className="p-8 max-w-md bg-background">
+			<Section title="Status" description="Paints a colored border and matching focus ring.">
+				<Field label="Error" hint='status="error"'>
+					<Textarea status="error" rows={3} defaultValue="This value is invalid." />
+				</Field>
+				<Field label="Warning" hint='status="warning"'>
+					<Textarea status="warning" rows={3} defaultValue="Heads up — review this." />
+				</Field>
+			</Section>
+		</div>
+	),
+};
+
+/** Auto-size — grow with content between `minRows` and `maxRows`. */
+export const AutoSize: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story:
+					'`autoSize` measures content height and resizes the textarea in place. Pass `true` for unbounded growth, or `{ minRows, maxRows }` to clamp. At `maxRows`, the textarea scrolls internally.',
+			},
+		},
+	},
+	render: () => {
+		const [a, setA] = useState('');
+		const [b, setB] = useState('Start typing more lines and watch this grow up to 6 rows...\n');
+		return (
+			<div className="p-8 max-w-md bg-background">
+				<Section title="Auto-size">
+					<Field label="Unbounded" hint="autoSize">
+						<Textarea
+							autoSize
+							placeholder="Grows with content..."
+							value={a}
+							onChange={(e) => setA(e.target.value)}
+						/>
+					</Field>
+					<Field label="Clamped" hint="autoSize={{ minRows: 1, maxRows: 6 }}">
+						<Textarea
+							autoSize={{ minRows: 1, maxRows: 6 }}
+							value={b}
+							onChange={(e) => setB(e.target.value)}
+						/>
+					</Field>
+				</Section>
+			</div>
+		);
+	},
+};
+

packages/ui/package.json

@@ -317,6 +317,16 @@
 				"require": "./dist/text-ellipsis/index.cjs"
 			}
 		},
+		"./textarea": {
+			"import": {
+				"types": "./dist/textarea/index.d.ts",
+				"import": "./dist/textarea/index.mjs"
+			},
+			"require": {
+				"types": "./dist/textarea/index.d.cts",
+				"require": "./dist/textarea/index.cjs"
+			}
+		},
 		"./toggle": {
 			"import": {
 				"types": "./dist/toggle/index.d.ts",

packages/ui/src/index.ts

@@ -28,6 +28,7 @@ export * from './switch/index.js';
 export * from './table/index.js';
 export * from './tabs/index.js';
 export * from './text-ellipsis/index.js';
+export * from './textarea/index.js';
 export * from './toggle/index.js';
 export * from './toggle-group/index.js';
 export * from './tooltip/index.js';

packages/ui/src/input/input.tsx

@@ -1,7 +1,9 @@
 import { Eye, EyeOff } from '@signozhq/icons';
 import * as React from 'react';
 import { Button } from '../button/index.js';
+import { InputNumber } from '../input-number/index.js';
 import { cn, type Simplify } from '../lib/utils.js';
+import { Textarea } from '../textarea/index.js';
 import styles from './input.module.scss';
 
 type BaseInputProps = {
@@ -253,7 +255,13 @@ const InputPassword = React.forwardRef<HTMLInputElement, InputPasswordProps>(
 InputPassword.displayName = 'InputPassword';
 
 // Create compound component with proper typing
-type InputWithPassword = typeof InputComponent & { Password: typeof InputPassword };
-(InputComponent as InputWithPassword).Password = InputPassword;
+type InputCompound = typeof InputComponent & {
+	Password: typeof InputPassword;
+	TextArea: typeof Textarea;
+	Number: typeof InputNumber;
+};
+(InputComponent as InputCompound).Password = InputPassword;
+(InputComponent as InputCompound).TextArea = Textarea;
+(InputComponent as InputCompound).Number = InputNumber;
 
-export const Input = InputComponent as InputWithPassword;
+export const Input = InputComponent as InputCompound;

packages/ui/src/textarea/index.ts

@@ -0,0 +1,2 @@
+export type * from './textarea.js';
+export { Textarea } from './textarea.js';

packages/ui/src/textarea/textarea.forward-ref.test.tsx

@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { Textarea } from './index.js';
+
+describe('Textarea forwardRef', () => {
+	it('forwards a ref to the underlying <textarea>', () => {
+		const ref = createRef<HTMLTextAreaElement>();
+		render(<Textarea ref={ref} testId="ta" placeholder="hi" />);
+		expect(ref.current).toBeInstanceOf(HTMLTextAreaElement);
+	});
+});