Components

Text Area

Captures multi-line user input.

<TextArea placeholder="Reply to comment…" />

API Reference

This component is based on the textarea element and supports common margin props.

PropTypeDefault
size
Responsive<"1" | "2" | "3">
"2"
variant
"classic" | "surface" | "soft"
"surface"
color
enum
No default value

Examples

Size

Use the size prop to control the size.

<Flex direction="column" gap="3" style={{ maxWidth: 500 }}>
<TextArea size="1" placeholder="Reply to comment…" />
<TextArea size="2" placeholder="Reply to comment…" />
<TextArea size="3" placeholder="Reply to comment…" />
</Flex>

Variant

Use the variant prop to control the visual style.

<Flex direction="column" gap="3" style={{ maxWidth: 500 }}>
<TextArea variant="surface" placeholder="Reply to comment…" />
<TextArea variant="classic" placeholder="Reply to comment…" />
<TextArea variant="soft" placeholder="Reply to comment…" />
</Flex>

Color

Use the color prop to assign a specific color, ignoring the global theme.

<Flex direction="column" gap="3" style={{ maxWidth: 500 }}>
<TextArea color="blue" variant="soft" placeholder="Reply to comment…" />
<TextArea color="green" variant="soft" placeholder="Reply to comment…" />
<TextArea color="red" variant="soft" placeholder="Reply to comment…" />
</Flex>
PreviousTabs