Choice 選択 · kf-choice
チェックボックス・ラジオ・スイッチ。native の input に kf-choice のラベルを被せる。
HTML
<div class="g">
<div class="kf-choices is-vertical">
<label class="kf-choice"><input type="checkbox" checked> 選択した</label>
<label class="kf-choice"><input type="checkbox"> 選択していない</label>
<label class="kf-choice"><input type="checkbox" disabled> 選べない</label>
</div>
<div class="kf-choices is-vertical">
<label class="kf-choice"><input type="radio" name="r" checked> 項目 A</label>
<label class="kf-choice"><input type="radio" name="r"> 項目 B</label>
<label class="kf-choice"><input type="radio" name="r"> 項目 C</label>
</div>
<div class="kf-choices is-vertical">
<label class="kf-choice kf-switch"><input type="checkbox" checked> 有効</label>
<label class="kf-choice kf-switch"><input type="checkbox"> 無効</label>
</div>
</div><label class="kf-choice"><input type="checkbox"> 文字</label>。ラジオはtype="radio"、スイッチはkf-choice kf-switch。- 選んだ状態は
primaryの塗り。枠はline-strong、角はradius-sm(ラジオとスイッチは丸)。 - 並べるときは
kf-choices(横)かkf-choices is-vertical(縦)。横に並べるのは 4 つまで。 - スイッチは「今すぐ効く設定」にだけ使う。保存ボタンを押して効くものはチェックボックス。
- 文字は選んだ結果を表す名詞か形容(「有効」「通知する」)。「はい/いいえ」にしない。
- フォーカスは
focus色の枠と薄い輪(入力欄と同じ)。native の input なのでキーボードでそのまま動く。