Homepage
Homepage
ThemesThemesHooksHooksColorsColorsIconsIcons

Text Field

Captures user input with an optional slot for buttons and icons.

View sourceReport an issueView in Playground
<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.

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

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>

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

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

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>
PreviousText Area
NextTooltip
Edit this page on GitHub.