# Text Field

> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

```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](/themes/docs/overview/layout#margin-props).

| Prop                                                                                                                          | Type                                                 | Default     |
| ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ----------- |
| `size`                                                                                                                        | `Responsive<"1" \| "2" \| "3">`                      | `"2"`       |
| `variant`The visual variant to apply, see [theme overview](/themes/docs/theme/overview#variants) for more details.            | `"classic" \| "surface" \| "soft"`                   | `"surface"` |
| `color`Overrides the accent color inherited from the Theme. See the [color guide](/themes/docs/theme/color) for more details. | `enum`                                               | —           |
| `radius`Overrides the radius inherited from the theme. See the [radius guide](/themes/docs/theme/radius) for more details.    | `"none" \| "small" \| "medium" \| "large" \| "full"` | —           |

### Slot

Contains icons or buttons associated with an Input.

| Prop                                                                                                                          | Type                         | Default |
| ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------- |
| `side`                                                                                                                        | `"left" \| "right"`          | —       |
| `color`Overrides the accent color inherited from the Theme. See the [color guide](/themes/docs/theme/color) for more details. | `enum`                       | —       |
| `gap`                                                                                                                         | `Responsive<enum \| string>` | —       |
| `px`                                                                                                                          | `Responsive<enum \| string>` | —       |
| `pl`                                                                                                                          | `Responsive<enum \| string>` | —       |
| `pr`                                                                                                                          | `Responsive<enum \| string>` | —       |

## 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](/themes/docs/theme/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>
```