Get Started

Components

accordion alert avatar breadcrumb button checkbox dropdown input label modal pagination radio select sheet skeleton switch table textarea toast

Textarea

Displays a form textarea or a component that looks like a textarea.

code

Expend code


    <Textarea placeholder="type your message here." className="w-[500px]" />


    <Textarea placeholder="type your message here." className="w-[500px]" />

#Variant

code

Expend code


    <Textarea
      placeholder="type your message here."
      className="border-sky-500 focus-visible:ring-sky-500 placeholder:text-sky-500 text-sky-500 w-[500px]"
    />


    <Textarea
      placeholder="type your message here."
      className="border-sky-500 focus-visible:ring-sky-500 placeholder:text-sky-500 text-sky-500 w-[500px]"
    />

#Disabled

code

Expend code


    <Textarea placeholder="type your message here." disabled className="w-[500px]" />


    <Textarea placeholder="type your message here." disabled className="w-[500px]" />

Textarea

A textarea component used for capturing user input.

Prop	Type	Default	Description
className	string	-	Applies additional Tailwind CSS classes to adjust the styling of the textarea.
ref	React.RefObject<HTMLTextAreaElement>	-	Used to pass a reference to the textarea.
disabled	boolean	false	Disables the textarea. When disabled, the cursor will not be displayed.
placeholder	string	-	Provides a hint to the user about what to input.
value	string \| number \| readonly string[]	-	Sets the current value of the textarea.
onChange	(event: React.ChangeEvent<HTMLTextAreaElement>) => void	undefined	Callback function that is called when the value of the textarea changes.