ui:radio

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

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

Examples

Default

Source Code

<div class="flex gap-2">
  <label class="ui:radio">
    <input type="radio" name="plan" checked />Basic
  </label>
  <label class="ui:radio">
    <input type="radio" name="plan" />Pro
  </label>
  <label class="ui:radio">
    <input type="radio" name="plan" disabled />Enterprise (準備中)
  </label>
</div>

Variants

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

Keyboard Controll

キー	動作
Tab Tab Tab Tab	グループの出入り
Right Arrow → Right Arrow → / Down Arrow ↓ Down Arrow ↓	次の項目に移動 + 選択（ループ）
Left Arrow ← Left Arrow ← / Up Arrow ↑ Up Arrow ↑	前の項目に移動 + 選択（ループ）
Space Space Space Space	フォーカス中の項目を選択