ui:checkbox

汎用的なCheckboxコンポーネントです。

WAI-ARIA Authoring Practices Checkbox Pattern に準拠しています。
通常は、ui:fieldSet と組み合わせて利用します。

Examples

Default

Source Code

<div class="flex gap-2">
  <label class="ui:checkbox">
    <input type="checkbox" name="notification" value="email" checked />メール
  </label>
  <label class="ui:checkbox">
    <input type="checkbox" name="notification" value="push" />プッシュ通知
  </label>
  <label class="ui:checkbox">
    <input type="checkbox" name="notification" value="sms" disabled />SMS (準備中)
  </label>
</div>

Variants

属性	要素	値	効果
`disabled`	`<input>`	-	項目を無効化

Keyboard Controll

キー	動作
Tab Tab	各 checkbox に順次フォーカス
Space Space	フォーカス中の checkbox を toggle