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>