テキストを入力可能なテキストフィールド

Example#

Props#

NameTypeDefaultDescription
isInvalidbooleanfalse有効でない入力を保持しているかどうか
data-*
optional
string-Custom data attributes

Usage#

Label

<label> とセットでマークアップしてください。次の点でメリットがあります:

  • クリック/タップエリアが拡張されます。<label>をクリック/タップすることで、フィールドにフォーカスが移動します。
  • スクリーンリーダーのユーザーが、そのフィールドが何を表しているのかを理解できます
  • <label> の代わりに aria-labelledby で他要素のテキストを参照することもできます(できるだけ<label>を使用してください)

ID属性を経由して<label>とフィールドを紐付けます(例では<Input>を使用しています)。

<label htmlFor="some-filed">ラベル</label>
<Input id="some-field" />

ID属性は、ページで固有の値を指定する必要があります。

Placeholder#

placeholder属性を指定した場合、未記入のフィールドに指定したテキストが表示されます。placeholderにはいくつかのデメリットが存在するため、使用は避けましょう。

  • 何かしらの値を入力した時点で表示されなくなります
  • あらかじめシステムによって値が入力されていた場合も表示されません

また、一般にPlaceholderは薄いグレーのテキストで表現される場合が多くあります。ユーザーが読みづらいスタイリングです。一方、より濃いテキストでPlaceholderを表現すると入力された値と見分けがつかなくなる問題が存在します。

type prop#

type Attributeを指定することで、特定の値をユーザーが入力しやすくなります。 列挙していないtype の値は <Input> では対応していません。

  • text
    • デフォルトの値です
  • mail
    • メールアドレスの入力に適しています
    • ブラウザによっては、メールアドレス入力に適したキーボードが表示されます
  • number
    • 数値を入力するためのtypeです
    • 上下の入力ボタンが表示され、あらかじめ決められた数値刻みで値を上下させることができます
    • 癖が強いため、後述の節を確認してください
  • password
    • 入力値が別の文字に置き換えられ秘匿されます
    • 入力値が確認できないと、操作が困難なケースがあります。type=textに切り替えられる機能とセットで提供してください
  • tel
    • 電話番号を入力するためのものです
    • 電話番号に適したキーボードが表示される可能性があります
  • url
    • URLを入力させる場合に使用します
    • URLに適したキーボードが表示される可能性があります

数字の入力に type="number" は使わない#

  • 数字
  • E表記(例: 1E+9)を受け入れてしまいます
    • 桁数が大きくなった場合、自動でE表記に変換されます
  • 別の解決策として inputmode="numeric" とバリデーションの組み合わせがあげられます
    • モバイル環境において、 inputmode="numeric" は数字キーボードを表示します

Keyboard Interaction#

  • Tab キーでフォーカスすることができます