Input

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

Example#

Name	Type	Default	Description
id optional	`string`	`-`	ネイティブ要素の `id` 属性。ページで固有のIDを指定
isInvalid	`boolean`	`false`	有効でない入力を保持しているかどうか
value required	`string \| number`	`-`	値
disabled	`boolean`	`false`	フィールドを無効化するかどうか
onChange optional	`ChangeEventHandler<HTMLInputElement>`	`-`	値が変化した場合のコールバック
data-* optional	`string`	`-`	Custom data attributes

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

クリック/タップエリアが拡張されます。<label>をクリック/タップすることで、フィールドにフォーカスが移動します。
スクリーンリーダーのユーザーが、そのフィールドが何を表しているのかを理解できます
- スクリーンリーダーの場合、入力欄がフォーカスされた場合に、<label> の内容が読み上げられます[^read-label]
<label> の代わりに aria-labelledby で他要素のテキストを参照することもできます（できるだけ<label>を使用してください）

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

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

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

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

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

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

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

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