Captures user input with an optional slot for buttons and icons.
<TextField.Root placeholder="Search the docs…">
<TextField.Slot>
<MagnifyingGlassIcon height="16" width="16" />
</TextField.Slot>
</TextField.Root>
Groups Slot and Input parts. This component is based on the div element and supports common margin props.
| Prop | Type | Default |
|---|---|---|
size | Responsive<"1" | "2" | "3"> | "2" |
variant | "classic" | "surface" | "soft" | "surface" |
color | enum | |
radius | "none" | "small" | "medium" | "large" | "full" |
Contains icons or buttons associated with an Input.
| Prop | Type | Default |
|---|---|---|
side | "left" | "right" | |
color | enum | |
gap | Responsive<enum | string> | |
px | Responsive<enum | string> | |
pl | Responsive<enum | string> | |
pr | Responsive<enum | string> |
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>
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>
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>
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>
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>