フォームコントロール

解剖

• Label

  対象controlとhtmlForで結び、入力目的を明示する。

• Input

  短文、数値、メールなど1行入力を扱う。

• Select

  既知の選択肢から1件を選び、portalへ一覧を表示する。

• Textarea

  補足説明など複数行入力を扱う。

• 補足とエラー

  control直後へ文章で示し、色だけに依存しない。

状態

• 初期

  label、placeholder、controlを同じ順序で表示する。

• focus

  borderと3px ringで現在位置を示す。

• invalid

  aria-invalid、destructive border、説明文を組み合わせる。

• disabled

  操作不能、cursor、opacityを共通化する。

• 選択肢open

  SelectContentをportalへ表示し、利用可能高以内でスクロールする。

仕様値

Input高さ

SP 44px / md 40px

Textarea

min-height 64px

Select

default 36px / sm 32px

角丸

rounded-md

focus

ring 3px

文字

Input 16px / Select・Label 14px