TextArea
A component for collecting long-form data TextArea.
Enter your full name
Usage
import { TextArea, TextAreaWrapper } from "#/ui/components/TextArea"
<TextAreaWrapper label="Name">
<TextArea placeholder="Dan Spratling" />
</TextAreaWrapper>
How it works
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>Hint
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>Error
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>