TextArea

The TextArea component is a highly customizable and styled textarea element for multi-line input. It provides validation, theming, and error handling features.

Usage

Basic TextArea

Here's a basic TextArea setup:

<TextArea placeholder="Description" />

Variants

Using the ghost, solid, outlined variant prop.

<Flex width="100%" height="100%" direction="column">
  <TextArea placeholder="Feedback" variant="ghost" />
  <TextArea placeholder="Feedback" variant="solid" />
  <TextArea placeholder="Feedback" variant="outlined" />
</Flex>

Shadow

Using the shadow prop we can adjust shadow values for the component.

<Flex direction="column">
  <TextArea shadow="4" placeholder="Name" />
</Flex>

Resizable TextArea

For a textarea that users can resize:

<TextArea placeholder="Comments" resizable={true} />

With Error Handling

Providing custom error messages and handling:

<TextArea placeholder="Notes" required errorMessage="This field is required." />

Themed TextArea

Changing color and radius:

<TextArea variant="outlined" placeholder="Review" color="blue" />

API

Props

Prop	Type	Default	Required
variant	'solid' | 'ghost' | 'outlined'	-	-
size	1 | 2 | 3 | 4 | 5	-	-
placeholder	string	-	-
resizable	boolean	-	-
errorMessage	string	-	-
onChange	(e: ChangeEvent<HTMLTextAreaElement>) => void	-	-
onSubmit	() => void	-	-
color	ThemeAccentColor	-	-
highContrast	boolean	-	-
shadow	ThemeShadow	-	-