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

文本字段

使用可选的按钮和图标插槽捕获用户输入。

View sourceReport an issueView in Playground
<TextField.Root placeholder="Search the docs…">

	<TextField.Slot>

		<MagnifyingGlassIcon height="16" width="16" />

	</TextField.Slot>

</TextField.Root>

API 参考

¥API Reference

根

¥Root

插槽和输入部分分组。此组件基于 div 元素并支持 常用边距属性。

¥Groups Slot and Input parts. This component is based on the div element and supports common margin props.

PropTypeDefault
size
Responsive<"1" | "2" | "3">
"2"
variant
"classic" | "surface" | "soft"
"surface"
color
enum
No default value
radius
"none" | "small" | "medium" | "large" | "full"
No default value

插槽

¥Slot

包含与输入框关联的图标或按钮。

¥Contains icons or buttons associated with an Input.

PropTypeDefault
side
"left" | "right"
No default value
color
enum
No default value
gap
Responsive<enum | string>
No default value
px
Responsive<enum | string>
No default value
pl
Responsive<enum | string>
No default value
pr
Responsive<enum | string>
No default value

示例

¥Examples

尺寸

¥Size

使用 size 属性控制大小。

¥Use the size prop to control the size.

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

	<Box maxWidth="200px">

		<TextField.Root size="1" placeholder="Search the docs…" />

	</Box>

	<Box maxWidth="250px">

		<TextField.Root size="2" placeholder="Search the docs…" />

	</Box>

	<Box maxWidth="300px">

		<TextField.Root size="3" placeholder="Search the docs…" />

	</Box>

</Flex>

在编写带有按钮的文本字段时，使用匹配的组件大小。但是，请勿将尺寸为 1 的输入框与按钮一起使用 - 在此尺寸下，没有足够的垂直空间来嵌套其他交互元素。

¥Use matching component sizes when composing Text Field with buttons. However, don’t use size 1 inputs with buttons—at this size, there is not enough vertical space to nest other interactive elements.

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

	<Box maxWidth="200px">

		<TextField.Root placeholder="Search the docs…" size="1">

			<TextField.Slot>

				<MagnifyingGlassIcon height="16" width="16" />

			</TextField.Slot>

		</TextField.Root>

	</Box>



	<Box maxWidth="250px">

		<TextField.Root placeholder="Search the docs…" size="2">

			<TextField.Slot>

				<MagnifyingGlassIcon height="16" width="16" />

			</TextField.Slot>

			<TextField.Slot>

				<IconButton size="1" variant="ghost">

					<DotsHorizontalIcon height="14" width="14" />

				</IconButton>

			</TextField.Slot>

		</TextField.Root>

	</Box>



	<Box maxWidth="300px">

		<TextField.Root placeholder="Search the docs…" size="3">

			<TextField.Slot>

				<MagnifyingGlassIcon height="16" width="16" />

			</TextField.Slot>

			<TextField.Slot pr="3">

				<IconButton size="2" variant="ghost">

					<DotsHorizontalIcon height="16" width="16" />

				</IconButton>

			</TextField.Slot>

		</TextField.Root>

	</Box>

</Flex>

变体

¥Variant

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

¥Use the variant prop to control the visual style.

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

	<TextField.Root variant="surface" placeholder="Search the docs…" />

	<TextField.Root variant="classic" placeholder="Search the docs…" />

	<TextField.Root variant="soft" placeholder="Search the docs…" />

</Flex>

颜色

¥Color

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

¥Use the color prop to assign a specific color.

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

	<TextField.Root
		color="indigo"
		variant="soft"
		placeholder="Search the docs…"
	/>

	<TextField.Root color="green" variant="soft" placeholder="Search the docs…" />

	<TextField.Root color="red" variant="soft" placeholder="Search the docs…" />

</Flex>

圆角

¥Radius

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

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

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

	<TextField.Root radius="none" placeholder="Search the docs…" />

	<TextField.Root radius="large" placeholder="Search the docs…" />

	<TextField.Root radius="full" placeholder="Search the docs…" />

</Flex>
Previous文本区域
Next工具提示