Appearance

Input ​

1 行の入力欄と、選択のための小さな部品をまとめて扱います。

いつ使うか ​

利用者に値を入れさせるときに使います。 type によって見た目が変わります。

複数行を入力させるなら Textarea、選択肢から選ばせるなら Select を使います。

例 ​

テキスト系 ​

type を指定しない場合と、text / email / url / password / number / date / datetime-local / month / search / tel / time / week が同じ見た目になります。

html
<input class="jumpu-input" placeholder="名前" />
<input type="email" class="jumpu-input" placeholder="email@example.com" />
<input type="number" class="jumpu-input" placeholder="0" />
<input type="date" class="jumpu-input" />

上に挙げた以外の type には、テキスト系のスタイルが当たりません。

ラジオボタン ​

html
<input
  type="radio"
  class="jumpu-input mr-1"
  name="radio-sample"
  value="radio-1"
  checked
/>
<input type="radio" class="jumpu-input" name="radio-sample" value="radio-2" />

チェックボックス ​

3 つめは indeterminate（どちらでもない状態）です。

html
<input type="checkbox" class="jumpu-input mr-1" value="checkbox-1" checked />
<input type="checkbox" class="jumpu-input mr-1" value="checkbox-2" />
<input type="checkbox" class="jumpu-input" value="checkbox-3" />

indeterminate は属性ではなく、スクリプトから設定します。

ファイル ​

html
<input type="file" class="jumpu-input" />

ファイル選択ボタンはブラウザの既定に戻しています。 見た目はブラウザごとに異なります。

ユーティリティによる調整 ​

調整したいこと書き方備考
横幅w-full
小さくtext-smテキスト系のみ。余白も一緒に変わります
大きさ（チェックボックス / ラジオ）w-5 h-5既定は w-4 h-4 相当。文字サイズには追従しません
誤りを示すborder-danger bg-danger/5Recipes に例があります

マークアップ規約 ​

位置要素 / 属性要否効果
ルートinput必須
ルートclass="jumpu-input"必須
ルートtype任意値によって当たるスタイルが変わります

状態 ​

状態見た目発火条件
フォーカス（テキスト系）境界が primary-700 になる:focus
フォーカス（チェックボックス / ラジオ）primary-700 のリングが 2px のオフセットで出る:focus
フォーカス（ファイル）ブラウザの既定のアウトライン:focus
選択済みprimary-700 で塗られ、白い印が出る:checked
どちらでもない横線が出る:indeterminate
未入力プレースホルダーが gray-300::placeholder

無効時の見た目は持ちません。

アクセシビリティ ​

対応する APG のパターンはありません。 ネイティブの input に委ねています。

label 要素を for で関連づけてください。 プレースホルダーはラベルの代わりになりません。

ラジオボタンのグループには fieldset と legend、または role="radiogroup" と aria-labelledby で、グループ全体の名前を与えてください。

誤りを色だけで示さないでください。 aria-invalid と、誤りの内容を説明するテキストを併せて示します。