Text Field - Radix Ui

jsx

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

API Reference

Root

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

Slot

Contains icons or buttons associated with an Input.

Examples

Size

Use the size prop to control the size.

jsx

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

jsx

<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

Use the variant prop to control the visual style.

jsx

<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

Use the color prop to assign a specific color.

jsx

<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

Use the radius prop to assign a specific radius value.

jsx

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