Captures multi-line user input.
<TextArea placeholder="Reply to comment…" />
This component is based on the textarea element and supports common margin props.
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>
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>
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>