Textarea

Textarea fields are used to collect large amounts of text from users.

The Textarea component is a wrapper around the native textarea element. It provides a consistent styling and layout for text-based inputs. It can be combined with the Label and Hint components from the TextField component to create a complete form field.

Basic Textarea

The simplest usage of the Textarea component is to use it as a wrapper around the native textarea element.

import { Textarea } from '~/core/ui/Textarea'; <Textarea className='max-w-sm h-36' placeholder="Describe yourself in 100 words or less." />

Textarea with Label

You can wrap the Textarea component with the Textarea component to create a form field with a label.

import { Textarea } from '~/core/ui/Textarea'; import { TextFieldLabel } from '~/core/ui/TextField'; <TextFieldLabel> Who are you? <Textarea placeholder="Describe yourself in 100 words or less." /> </TextFieldLabel>

TextField with Label and Hint

You can add a hint to the TextFieldLabel component to provide additional information to the user.

import { TextFieldLabel, TextFieldHint } from '~/core/ui/TextField'; import { Textarea } from '~/core/ui/Textarea'; <TextFieldLabel> Who are you? <Textarea className='h-36' placeholder="Describe yourself in 100 words or less." /> <TextFieldHint> This is a hint </TextFieldHint> </TextFieldLabel>

Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS