Input

凹んだ面を宣言します

入力欄は地であって塗りではありません。面の仕組みに乗るので、 背景と文字が対で決まります。塗るだけの道はありません。

誤りは自分で決めません

aria-invalid が付くと境界が変わります。付けるのは Field です—— ここで決めると、Field を使わない書き方だけが誤りを名乗れることになります。

境界の色は文字の役割（border-danger）です。mark ではありません—— 深い面の上では mark が要件ぎりぎりまで明るい側へ寄るので、 赤のように、明るい側で彩度が落ちる色は白っぽく見えます。

状態の境界は太くします。 1px では色の面積が足りず、違いが読み取りにくいためです。

境界だけで伝えません。 Field が文言も一緒に出します。

満たしていることも表せます

valid を渡すと、境界が変わり、印が出ます。

誤りとは別の仕組みで受け取ります——誤りには aria-invalid という 標準の属性がありますが、満たしていることを表す属性はありません。 そこだけ形が違うのはそのためです。

押せないときは文字が淡くなります

不透明度では表しません。 薄めると前景と背景が同時に下地へ寄り、 読みやすさの保証が効かなくなります。