Field

Field の children は関数です。受け取った属性（id・aria-describedby・aria-invalid・data-invalid）を入力の要素へ展開します。PasswordField・CountedTextarea・Combobox・NumberField・DateField・TimeField へ展開すると、中の入力に付きます。id は画面内で一意にします。

ラベルは12pxの太字で入力の上に置きます。help は入力の下の灰色の小さな補足（11px）、error は直す所を書くエラー文です。error を渡すと入力の枠を赤にし、欄のすぐ下にアイコンと赤い12pxの文でエラーを出して、aria-invalid を付けます。現在値を補足へ置かず、入力の値として見せます。status はラベルの行の終わりに保存の状態などを並べます。

Input・Textarea・Select は標準の要素に rx-input を付けたもので、属性をそのまま渡します。一行の Input は白い面に1px #dedede の枠、角丸2px、内側の影なしで、高さ24px・12pxの黒い文字です（data-size="large" は14pxの文字で高さ32px）。Textarea は1px #c1c1c1 の枠と角丸5pxで、本文と同じ13pxの文字です。一つを選ぶ Select は、手本のMacのポップアップボタンを測って描いた、白から薄い灰色へ中ほどで段の付く縦の塗りと1pxの灰色の枠（角丸4px）、末尾の上下の矢印の高さ22pxの欄です。フォーカスすると枠を青にし、外側に淡い青の輪を広げます。readonly は面を淡い灰色にして値を読めるままにし、disabled は形と面をそのままにして文字だけを灰色にします。Choice は label で包んだチェックボックスかラジオボタンで、どちらも手本のMacの標準の部品を測って描いた14pxの大きさで置きます（灰色の枠と縦の塗り。選ぶと淡い青の塗りに紺の縁と紺の印）。kind="option" は説明を伴う選択肢を1px #ececec の枠で囲んだ白い面（角丸3px）に載せ、ホバーすると枠を濃くし、選ぶと枠を紺、面を淡い青（#ddeefe）にします。Choice のグループは fieldset.rx-choice-group の div.list に並べ、legend で名前を付けます。

PasswordField は右端の灰色の目のアイコン（ホバーすると淡い青の面に青緑）で、入力を伏せ字と文字の表示で切り替えます。フォームを送信した時とリセットした時は伏せ字に戻します。PasswordFieldController を password-field として登録します。

CountedTextarea は入力の下の末尾側に、灰色の小さな文字で「12 / 40 文字」の形の文字数を出します。文字数はcontrollerが接続してから出します。limit を超えても入力は止めず、overflowMessage を出して入力を無効な状態にし、フォームの送信を止めます。数えるのはUTF-16の単位の長さです。CharacterCountController を character-count として登録します。

Combobox は自由に入力できる欄に、候補の一覧を添えます。欄か右の矢印を押すと一覧が開き、候補を選ぶと値が欄に入って一覧を閉じます。一覧は白いパネル（1px #bbb の枠、角丸5px、外への柔らかい影）で、ホバーした候補とキーボードで移った候補を角の無い淡い青（#ddeefe）に黒い文字にし、選んだ候補は太字にします。打った文字では絞り込みません。readonly・disabled の間は一覧を開きません。ComboboxController を combobox として登録します。候補を選ぶと combobox:change を出し、欄でも打って変えた時と同じく標準の input・change を発火します。開閉の矢印と role="combobox" はcontrollerが接続してから付けます。

CheckboxGroup は先頭に全て選択のチェックボックスを置き、全て選ぶとオン、一部だけの時は中間の状態にします。全て選択は disabled の選択肢を切り替えません。選んだ値は name で一つずつ送信し、全て選択のチェックボックスは送信しません。value が空白だけの選択肢と、重なった値の二つ目以降は出しません。CheckboxGroupController を checkbox-group として登録します。

NumberField・DateField・TimeField は標準の number・date・time の入力で、min・max・step をそのまま使います。値が min・max と等しいとルートの data-state を min・max にし、それ以外は between にします。NumberField は PageUp・PageDown で pageStep 倍のstepだけ動かします。この変更も、矢印キーや打って変えた時と同じく標準の input・change を発火し、number-field:change を出します。それぞれ NumberFieldController を number-field、DateFieldController を date-field、TimeFieldController を time-field として登録します。

入力のCSSは components/field.css にあります。Field の外で入力だけを使う場合も読み込みます。

controllerを登録しない時、またはJavaScriptが無い時は、標準の入力として動きます。PasswordField は切り替えのボタンを出さず、CountedTextarea は文字数を出さず上限でも送信を止めません。Combobox は開閉の矢印の無い一行の入力、CheckboxGroup の全て選択は押しても他を切り替えません。入力の検証は送信先でも行います。