Textarea

Displays a multi-line text input field.

Installation

Copy and paste the following code into your project

import { type HTMLStyledProps, styled } from '@styled-system/jsx'
import { textarea } from '@styled-system/recipes'
 
export const Textarea = styled('textarea', textarea)
export type TextareaProps = HTMLStyledProps<typeof Textarea>

Update the import paths to match your project setup

Usage

import { Textarea } from '@/components/ui/textarea'

<Textarea placeholder="Type your message here." />

Examples

Disabled

With Button

With Label

Your message

With Helper Text

Your message will be copied to the support team.

Textarea

Installation

Copy and paste the following code into your project

Update the import paths to match your project setup

Usage

Examples

Disabled

With Button

With Label

With Helper Text

Form