Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationPlayground
Components

Text Field

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

View sourceReport an issueView in Playground
<TextField.Root>

  <TextField.Slot>

    <MagnifyingGlassIcon height="16" width="16" />

  </TextField.Slot>

  <TextField.Input placeholder="Search the docs…" />

</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
color
enum
No default value
gap
enum
No default value

Input

The input element. This component is based on the input 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

Examples

Without Slots

You can omit the Root part if you are not using a Slot.

<TextField.Input placeholder="Enter your email" />

Size

Use the size prop to control the size.

<Flex direction="column" gap="3" style={{ maxWidth: 400 }}>

  <TextField.Input size="1" placeholder="Search the docs…" />

  <TextField.Input size="2" placeholder="Search the docs…" />

  <TextField.Input size="3" placeholder="Search the docs…" />

</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" style={{ maxWidth: 400 }}>

  <TextField.Root>

    <TextField.Slot>

      <MagnifyingGlassIcon height="16" width="16" />

    </TextField.Slot>

    <TextField.Input placeholder="Search the docs…" size="1" />

  </TextField.Root>



  <TextField.Root>

    <TextField.Slot>

      <MagnifyingGlassIcon height="16" width="16" />

    </TextField.Slot>

    <TextField.Input placeholder="Search the docs…" size="2" />

    <TextField.Slot>

      <IconButton size="1" variant="ghost">

        <DotsHorizontalIcon height="14" width="14" />

      </IconButton>

    </TextField.Slot>

  </TextField.Root>



  <TextField.Root>

    <TextField.Slot>

      <MagnifyingGlassIcon height="16" width="16" />

    </TextField.Slot>

    <TextField.Input placeholder="Search the docs…" size="3" />

    <TextField.Slot pr="3">

      <IconButton size="2" variant="ghost">

        <DotsHorizontalIcon height="16" width="16" />

      </IconButton>

    </TextField.Slot>

  </TextField.Root>

</Flex>

Variant

Use the variant prop to control the visual style.

<Flex direction="column" gap="3" style={{ maxWidth: 400 }}>

  <TextField.Input variant="surface" placeholder="Search the docs…" />

  <TextField.Input variant="classic" placeholder="Search the docs…" />

  <TextField.Input variant="soft" placeholder="Search the docs…" />

</Flex>

Color

Use the color prop to assign a specific color, ignoring the global theme.

<Flex direction="column" gap="3" style={{ maxWidth: 400 }}>

  <TextField.Input
    color="indigo"
    variant="soft"
    placeholder="Search the docs…"
  />

  <TextField.Input
    color="green"
    variant="soft"
    placeholder="Search the docs…"
  />

  <TextField.Input color="red" variant="soft" placeholder="Search the docs…" />

</Flex>

Radius

Use the radius prop to assign a specific radius value, ignoring the global theme.

<Flex direction="column" gap="3" style={{ maxWidth: 400 }}>

  <TextField.Input radius="none" placeholder="Search the docs…" />

  <TextField.Input radius="large" placeholder="Search the docs…" />

  <TextField.Input radius="full" placeholder="Search the docs…" />

</Flex>
PreviousText Area
NextTooltip
Edit this page on GitHub.