Radix Vue

外観

RadioGroup ​

一度に1つ以上のボタンを選択できない、チェック可能なボタン（ラジオボタン）のセットです。
vue
<script setup lang="ts">
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'radix-vue'
import { ref } from 'vue'

const radioStateSingle = ref('default')
</script>

<template>
  <RadioGroupRoot
    v-model="radioStateSingle"
    class="flex flex-col gap-2.5"
    default-value="default"
    aria-label="View density"
  >
    <div class="flex items-center">
      <RadioGroupItem
        id="r1"
        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
        value="default"
      >
        <RadioGroupIndicator
          class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-grass11"
        />
      </RadioGroupItem>
      <label
        class="text-white text-[15px] leading-none pl-[15px]"
        for="r1"
      >
        Default
      </label>
    </div>
    <div class="flex items-center">
      <RadioGroupItem
        id="r2"
        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
        value="comfortable"
      >
        <RadioGroupIndicator
          class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-grass11"
        />
      </RadioGroupItem>
      <label
        class="text-white text-[15px] leading-none pl-[15px]"
        for="r2"
      >
        Comfortable
      </label>
    </div>
    <div class="flex items-center">
      <RadioGroupItem
        id="r3"
        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
        value="compact"
      >
        <RadioGroupIndicator
          class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-grass11"
        />
      </RadioGroupItem>
      <label
        class="text-white text-[15px] leading-none pl-[15px]"
        for="r3"
      >
        Compact
      </label>
    </div>
  </RadioGroupRoot>
</template>

機能 ​

  • フルキーボードナビゲーション。
  • 水平/垂直方向に対応。
  • 制御可能または非制御可能です。

インストール ​

コマンドラインからコンポーネントをインストールします。

sh
$ npm add radix-vue

構成 ​

すべての部品をインポートして組み立てます。

vue
<script setup>
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'radix-vue'
</script>

<template>
  <RadioGroupRoot>
    <RadioGroupItem>
      <RadioGroupIndicator />
    </RadioGroupItem>
  </RadioGroupRoot>
</template>

APIリファレンス ​

ルート ​

ラジオグループのすべての部品を含みます。

プロパティデフォルト型
as
'div'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素に対してデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細はコンポジションガイドをご覧ください。

defaultValue
string

最初にレンダリングされるときにチェックされるべきラジオアイテムの値。

ラジオアイテムの状態を制御する必要がない場合に使用します。

dir
'ltr' | 'rtl'

該当する場合は、コンボボックスの読み取り方向。
省略した場合は、`ConfigProvider`からグローバルに継承するか、LTR（左から右）の読み取りモードを想定します。

disabled
false
boolean

`true`の場合、ユーザーがラジオアイテムと対話することを防ぎます。

loop
true
boolean

`true`の場合、キーボードナビゲーションは最後のアイテムから最初のアイテムへ、そしてその逆にループします。

modelValue
string

チェックするラジオアイテムの制御された値。`v-model`としてバインドできます。

name
string

グループの名前。名前/値のペアの一部として、所有するフォームと共に送信されます。

orientation
'vertical' | 'horizontal'

コンポーネントの方向。

required
false
boolean

`true`の場合、所有するフォームを送信する前にユーザーがラジオアイテムをチェックする必要があることを示します。

Emitペイロード
update:modelValue
[ペイロード: string]

ラジオグループの値が変更されたときに呼び出されるイベントハンドラ

スロット (デフォルト)ペイロード
modelValue
string | undefined

現在の入力値

データ属性値
[data-disabled]無効な場合に表示されます

アイテム ​

チェックできるグループ内のアイテム。`form`内で使用された場合、`input`もレンダリングされ、イベントが正しく伝播されるようにします。

プロパティデフォルト型
as
'button'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素に対してデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細はコンポジションガイドをご覧ください。

disabled
false
boolean

`true`の場合、ユーザーがラジオアイテムと対話することを防ぎます。

id
string
name
string
required
boolean

`true`の場合、所有するフォームを送信する前にユーザーがラジオアイテムをチェックする必要があることを示します。

value
string

`name`と共に送信されるときのデータとして与えられる値。

データ属性値
[data-state]"checked" | "unchecked"
[data-disabled]無効な場合に表示されます

インジケーター ​

ラジオアイテムがチェックされた状態の場合にレンダリングされます。この要素を直接スタイル設定するか、アイコンを配置するためのラッパーとして使用するか、またはその両方を使用できます。

プロパティデフォルト型
as
'span'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素に対してデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細はコンポジションガイドをご覧ください。

forceMount
boolean

より多くの制御が必要な場合にマウントを強制するために使用されます。Vueアニメーションライブラリでアニメーションを制御する場合に役立ちます。

データ属性値
[data-state]"checked" | "unchecked"
[data-disabled]無効な場合に表示されます

アクセシビリティ ​

ラジオグループWAI-ARIAデザインパターンに準拠し、ロービングタブインデックスを使用してラジオアイテム間のフォーカス移動を管理します。

キーボード操作 ​

キー説明
Tab
フォーカスをチェックされたラジオアイテムまたはグループの最初のラジオアイテムに移動します。
Space
フォーカスがチェックされていないラジオアイテムにある場合、それをチェックします。
ArrowDown
フォーカスを移動し、グループの次のラジオアイテムをチェックします。
ArrowRight
フォーカスを移動し、グループの次のラジオアイテムをチェックします。
ArrowUp
グループの前のラジオアイテムにフォーカスを移動します。
ArrowLeft
グループの前のラジオアイテムにフォーカスを移動します。