组件

文本字段

捕获用户输入,并为按钮和图标提供可选插槽。

<TextField.Root placeholder="Search the docs…">
<TextField.Slot>
<MagnifyingGlassIcon height="16" width="16" />
</TextField.Slot>
</TextField.Root>

API 参考

根元素

组合了 Slot 和 Input 部分。此组件基于 div 元素,并支持通用 margin 属性

属性类型默认值
size
Responsive<"1" | "2" | "3">
"2"
variant
"classic" | "surface" | "soft"
"surface"
color
enum
无默认值
radius
"none" | "small" | "medium" | "large" | "full"
无默认值

Slot

包含与 Input 关联的图标或按钮。

属性类型默认值
side
"left" | "right"
无默认值
color
enum
无默认值
gap
Responsive<enum | string>
无默认值
px
Responsive<enum | string>
无默认值
pl
Responsive<enum | string>
无默认值
pr
Responsive<enum | string>
无默认值

示例

尺寸

使用 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 的输入框与按钮一起使用——在这种尺寸下,没有足够的垂直空间来嵌套其他交互式元素。

<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 属性来控制视觉样式。

<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 属性来指定特定的颜色

<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 属性来指定特定的圆角值。

<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>
上一个文本区域
下一个工具提示