Textarea

A multi-line text input field that allows users to enter longer form content.

How to Import

Add this import to your component file

app/page.tsx

1import { Textarea } from '@/components/lightswind/textarea';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

placeholder	string	-	Placeholder text to display when the textarea is empty.	Optional
value	string	-	The controlled value of the textarea.	Optional
defaultValue	string	-	The default value when the textarea is initially rendered.	Optional
disabled	boolean	false	When true, prevents the user from interacting with the textarea.	Optional
required	boolean	false	When true, indicates that the user must provide a value.	Optional
readOnly	boolean	false	When true, makes the textarea non-editable.	Optional
rows	number	-	The number of visible text lines.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { Textarea } from '@/components/lightswind/textarea';
2import { Label } from '@/components/lightswind/label';
3
4export function TextareaDemo() {
5  return (
6    <div className="grid w-full gap-1.5">
7      <Label htmlFor="message">Your message</Label>
8      <Textarea placeholder="Type your message here." id="message" />
9    </div>
10  );
11}

Previousswitch

Nexttoggle

A product byＭＵＨＩＬＡＮ and Team❤️.

Textarea

A multi-line text input field that allows users to enter longer form content.

...

How to Import

Add this import to your component file

app/page.tsx

1import { Textarea } from '@/components/lightswind/textarea';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

placeholder	string	-	Placeholder text to display when the textarea is empty.	Optional
value	string	-	The controlled value of the textarea.	Optional
defaultValue	string	-	The default value when the textarea is initially rendered.	Optional
disabled	boolean	false	When true, prevents the user from interacting with the textarea.	Optional
required	boolean	false	When true, indicates that the user must provide a value.	Optional
readOnly	boolean	false	When true, makes the textarea non-editable.	Optional
rows	number	-	The number of visible text lines.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { Textarea } from '@/components/lightswind/textarea';
2import { Label } from '@/components/lightswind/label';
3
4export function TextareaDemo() {
5  return (
6    <div className="grid w-full gap-1.5">
7      <Label htmlFor="message">Your message</Label>
8      <Textarea placeholder="Type your message here." id="message" />
9    </div>
10  );
11}

Previousswitch

Nexttoggle

A product byＭＵＨＩＬＡＮ and Team❤️.

Textarea

How to Import

Props

Basic Usage

On This Page

Contribute

Textarea

How to Import

Props

Basic Usage

On This Page

Contribute

React Textarea Component - Lightswind UI

Key Details of React Textarea

Textarea

How to Import

Props

Basic Usage

On This Page

Contribute

Textarea

How to Import

Props

Basic Usage

On This Page

Contribute