Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档演练博客
Components

文本区域

捕获多行用户输入。

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

API 参考

¥API Reference

此组件基于 textarea 元素并支持 常用边距属性。

¥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"
resize
Responsive<"none" | "vertical" | "horizontal" | "both">
No default value
color
enum
No default value
radius
"none" | "small" | "medium" | "large" | "full"
No default value

示例

¥Examples

尺寸

¥Size

使用 size 属性控制大小。

¥Use the size prop to control the size.

<Flex direction="column" gap="3">

	<Box maxWidth="200px">

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

	</Box>

	<Box maxWidth="250px">

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

	</Box>

	<Box maxWidth="300px">

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

	</Box>

</Flex>

变体

¥Variant

使用 variant 属性控制视觉样式。

¥Use the variant prop to control the visual style.

<Flex direction="column" gap="3" maxWidth="250px">

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

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

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

</Flex>

颜色

¥Color

使用 color 属性指定特定的 color。

¥Use the color prop to assign a specific color.

<Flex direction="column" gap="3" maxWidth="250px">

	<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>

圆角

¥Radius

使用 radius 属性指定特定的圆角值。

¥Use the radius prop to assign a specific radius value.

<Flex direction="column" gap="3" maxWidth="250px">

	<TextArea radius="none" placeholder="Search the docs…" />

	<TextArea radius="large" placeholder="Search the docs…" />

	<TextArea radius="full" placeholder="Search the docs…" />

</Flex>

调整大小

¥Resize

使用 resize 属性启用单轴或双轴大小调整。

¥Use the resize prop to enable resizing on one or both axis.

<Flex direction="column" gap="3" maxWidth="250px">

	<TextArea resize="none" placeholder="Search the docs…" />

	<TextArea resize="vertical" placeholder="Search the docs…" />

	<TextArea resize="horizontal" placeholder="Search the docs…" />

	<TextArea resize="both" placeholder="Search the docs…" />

</Flex>
Previous标签导航
Next文本字段