テキストフィールド

ボタンやアイコン用のオプションのスロットを備えた、ユーザー入力を受け取るフィールドです。

ソースコードを見る問題を報告する Playgroundで確認

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

APIリファレンス

ルート

スロットと入力部分をグループ化します。このコンポーネントはdiv要素に基づいており、共通のマージンプロパティをサポートしています。

プロパティ	型	デフォルト値
`size`	`レスポンシブ<"1" \| "2" \| "3">`	`"2"`
`variant`	`"classic" \| "surface" \| "soft"`	`"surface"`
`color`	`列挙型`	デフォルト値なし
`radius`	`"none" \| "small" \| "medium" \| "large" \| "full"`	デフォルト値なし

スロット

入力に関連付けられたアイコンやボタンを含みます。

プロパティ	型	デフォルト値
`side`	`"left" \| "right"`	デフォルト値なし
`color`	`列挙型`	デフォルト値なし
`gap`	`レスポンシブ<列挙型 \| 文字列>`	デフォルト値なし
`px`	`レスポンシブ<列挙型 \| 文字列>`	デフォルト値なし
`pl`	`レスポンシブ<列挙型 \| 文字列>`	デフォルト値なし
`pr`	`レスポンシブ<列挙型 \| 文字列>`	デフォルト値なし

例

サイズ

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>

テキストフィールドをボタンと組み合わせて使用する場合、一致するコンポーネントサイズを使用してください。ただし、サイズ1の入力にボタンを使用しないでください。このサイズでは、他のインタラクティブな要素をネストするのに十分な垂直方向のスペースがありません。

<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プロパティを使用して視覚スタイルを制御します。

<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プロパティを使用して、特定のカラーを割り当てます。

<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プロパティを使用して、特定の半径値を割り当てます。

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

前へテキストエリア

次へツールチップ

GitHubでこのページを編集する。

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

テキストフィールド