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.

Hint

You can pass a hint to the TextAreaWrapper to provide additional context to the user.

What do you call yourself?

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