Textfield
*このドキュメントは編集中です
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の左のみに配置し、右には配置しません。