＊このドキュメントは編集中です

Dictionary

Element

AContainer

テキストフィールドのかたちをつくる要素です。この要素の大きさが、テキストフィールドをタップ/クリックできる範囲です。

BInput text / Placeholder text

Input textは、ユーザーがテキストフィールドに入力したテキストです。Input textの内容が空の場合は表示しないか、HTMLのinput要素のplaceholder属性に指定したテキストを表示し、これをPlaceholder textと呼びます。Input textとPlaceholder textは同じ要素ですが、状態によって名前が変わります。

Placeholder textを表示する場合は、Input textと区別するために、配色の明度を下げます。Placeholder textはユーザーが入力をはじめると見えなくなるため、ユーザーへ入力例などを提示する機能に留めて、テキストフィールドの説明はなるべくFormコンポーネントが提供するLabelやDescriptionを使用します。ただし、キーワード検索やログインフォームなど、アイコンで意味を補完できる場合や、慣習的に理解できると判断した場合は、Placeholder textにLabelと同等の機能を持たせてもかまいません。その場合は、アクセシビリティを担保するためにHTMLにlabel要素をマークアップすることを忘れないでください。

CLeading icon (optional)

テキストフィールドのアイコンです。テキストフィールドが提供している機能の意味を伝わりやすくするために、情報を補完する機能を持ちます。Input text / Placeholder textの左のみに配置し、右には配置しません。