Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationPlayground
Components

Text Area

Captures multi-line user input.

View sourceReport an issueView in Playground
<TextArea placeholder="Reply to comment…" />

API Reference

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

PropTypeDefault
sizeResponsive<"1" | "2" | "3">"2"
variant"classic" | "surface" | "soft""surface"
colorenumNo 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
NextText Field
Edit this page on GitHub.