Text Field

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

<.text_field placeholder="Search the docs…">
  <:slot>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
    </svg>
  </:slot>
</.text_field>

API Reference

Root

Groups slot adornments and the input. This component is based on the div element and supports common margin props.

Prop	Type	Default	Description
`autocomplete`	`string`	`nil`
`autofocus`	`boolean`	`false`
`class`	`string`	`nil`
`color`	`string`	`—`	Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
`disabled`	`boolean`	`false`
`high_contrast`	`boolean`	`—`	Whether to increase color contrast with the background.
`inputmode`	`string`	`nil`
`m`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`mb`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`ml`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`mr`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`mt`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`mx`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`my`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`name`	`string`	`nil`
`placeholder`	`string`	`nil`
`readonly`	`boolean`	`false`
`size`	`string`	`"2"`	TextField size from 1 to 3. Controls height and paddings.
`style`	`string`	`""`
`type`	`string`	`"text"`	Native input type.
`value`	`string`	`nil`
`variant`	`string`	`"surface"`	Visual style variant. One of 'surface', 'classic', or 'soft'.

autocomplete

Type string Default nil

autofocus

Type boolean Default false

class

Type string Default nil

color Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.

Type string Default —

disabled

Type boolean Default false

high_contrast Whether to increase color contrast with the background.

Type boolean Default —

inputmode

Type string Default nil

m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

name

Type string Default nil

placeholder

Type string Default nil

readonly

Type boolean Default false

size TextField size from 1 to 3. Controls height and paddings.

Type string Default "2"

style

Type string Default ""

type Native input type.

Type string Default "text"

value

Type string Default nil

variant Visual style variant. One of 'surface', 'classic', or 'soft'.

Type string Default "surface"

Slot

Contains icons or buttons associated with the input. Pass one or more <:slot> entries; use side="left" (default) or side="right".

<.text_field placeholder="Amount">
  <:slot>$</:slot>
  <:slot side="right">USD</:slot>
</.text_field>

Examples

Size

Use the size prop to control the size.

<.flex direction="column" gap="3">
  <.box max_width="200px"><.text_field size="1" placeholder="Search the docs…" /></.box>
  <.box max_width="250px"><.text_field size="2" placeholder="Search the docs…" /></.box>
  <.box max_width="300px"><.text_field 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" max_width="400px">
  <.box max_width="200px">
    <.text_field placeholder="Search the docs…" size="1">
      <:slot>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
        </svg>
      </:slot>
    </.text_field>
  </.box>
  <.box max_width="250px">
    <.text_field placeholder="Search the docs…" size="2">
      <:slot>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
        </svg>
      </:slot>
      <:slot side="right">
        <.icon_button size="1" variant="ghost">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle
              cx="5"
              cy="12"
              r="1"
            />
          </svg>
        </.icon_button>
      </:slot>
    </.text_field>
  </.box>
  <.box max_width="300px">
    <.text_field placeholder="Search the docs…" size="3">
      <:slot>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
        </svg>
      </:slot>
      <:slot side="right">
        <.icon_button size="2" variant="ghost">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle
              cx="5"
              cy="12"
              r="1"
            />
          </svg>
        </.icon_button>
      </:slot>
    </.text_field>
  </.box>
</.flex>

Variant

Use the variant prop to control the visual style.

<.flex direction="column" gap="3" max_width="250px">
  <.text_field variant="surface" placeholder="Search the docs…" /><.text_field
    variant="classic"
    placeholder="Search the docs…"
  /><.text_field variant="soft" placeholder="Search the docs…" />
</.flex>

Color

Use the color prop to assign a specific accent color.

<.flex direction="column" gap="3" max_width="250px">
  <.text_field color="indigo" variant="soft" placeholder="Search the docs…" /><.text_field
    color="green"
    variant="soft"
    placeholder="Search the docs…"
  /><.text_field color="red" variant="soft" placeholder="Search the docs…" />
</.flex>