A component for collecting long-form data TextArea.
Enter your full name
import { TextArea, TextAreaWrapper } from "#/ui/components/TextArea"
<TextAreaWrapper label="Name">
<TextArea placeholder="Dan Spratling" />
</TextAreaWrapper>
The TextArea
component provides some base styling to the regular textarea
element, but you can pass any other props to it that you would normally pass to a textarea
element too.
The TextAreaWrapper
goes around your TextArea
to provide additional associated elements easily like labels & hints, but it’s totally optional if you want to use a TextArea
separate from your labels and roll-your-own.
<TextAreaWrapper label="Name">
<TextArea placeholder="Dan Spratling" />
</TextAreaWrapper>
<div className="w-full flex items-center">
<label htmlFor="example-TextArea" className="w-1/3">
Custom Label
</label>
<TextArea id="example-TextArea" placeholder="Dan Spratling" />
</div>
You can pass a hint to the TextAreaWrapper
to provide additional context to the user.
What do you call yourself?
<TextAreaWrapper label="Name" hint="required">
<TextArea placeholder="Dan Spratling" />
</TextAreaWrapper>
Passing an error to the TextAreaWrapper
and TextArea
will display error styles. If a hint exists, it will be replaced with the error.
Your name is required
<TextAreaWrapper label="Name" hint="required" error="Your name is required">
<TextArea placeholder="Dan Spratling" error={true} />
</TextAreaWrapper>