Radix Vue

外観

チェックボックス ​

ユーザーがチェック済みと未チェックを切り替えられるコントロール。
vue
<script setup lang="ts">
import { ref } from 'vue'
import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
import { Icon } from '@iconify/vue'

const checkboxOne = ref(true)
</script>

<template>
  <div class="flex flex-col gap-2.5">
    <label class="flex flex-row gap-4 items-center [&>.checkbox]:hover:bg-neutral-100">
      <CheckboxRoot
        v-model:checked="checkboxOne"
        class="shadow-blackA7 hover:bg-green3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus-within:shadow-[0_0_0_2px_black]"
      >
        <CheckboxIndicator class="bg-white h-full w-full rounded flex items-center justify-center">
          <Icon
            icon="radix-icons:check"
            class="h-3.5 w-3.5 text-grass11"
          />
        </CheckboxIndicator>
      </CheckboxRoot>
      <span class="select-none text-white">Accept terms and conditions.</span>
    </label>
  </div>
</template>

機能 ​

  • 不確定状態をサポートします。
  • 完全なキーボードナビゲーション。
  • 制御可能または非制御にできます。

インストール ​

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

sh
$ npm add radix-vue

構造 ​

すべてのパーツをインポートして、それらをまとめます。

vue
<script setup>
import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
</script>

<template>
  <CheckboxRoot>
    <CheckboxIndicator />
  </CheckboxRoot>
</template>

APIリファレンス ​

ルート ​

チェックボックスのすべての部分を含みます。また、form内で使用すると、イベントが正しく伝播するようにinputもレンダリングされます。

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

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

asChild
boolean

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

詳細については、コンポジションガイドをお読みください。

checked
boolean | 'indeterminate'

チェックボックスの制御されたチェック状態。v-modelでバインドできます。

defaultChecked
boolean

最初にレンダリングされたときのチェックボックスのチェック状態。チェック状態を制御する必要がない場合に使用します。

disabled
boolean

trueの場合、ユーザーがチェックボックスを操作することを防ぎます

id
string

要素のID

name
string

チェックボックスの名前。名前/値のペアの一部として、所有するフォームとともに送信されます。

required
boolean

trueの場合、所有するフォームを送信する前に、ユーザーがチェックボックスをオンにする必要があることを示します。

value
'on'
string

nameとともに送信されたときにデータとして与えられる値。

エミットペイロード
update:checked
[value: boolean]

チェックボックスのチェック状態が変化したときに呼び出されるイベントハンドラー。

スロット (デフォルト)ペイロード
checked
false | true | 'indeterminate'

現在のチェック状態

データ属性値
[data-state]"checked" | "unchecked" | "indeterminate"
[data-disabled]無効の場合に表示

インジケーター ​

チェックボックスがチェックされているか、不確定状態にあるときにレンダリングされます。この要素を直接スタイル設定することも、アイコンを入れるためのラッパーとして使用することも、両方を行うこともできます。

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

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

asChild
boolean

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

詳細については、コンポジションガイドをお読みください。

forceMount
boolean

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

データ属性値
[data-state]"checked" | "unchecked" | "indeterminate"
[data-disabled]無効の場合に表示

例 ​

不確定 ​

状態を制御することにより、チェックボックスをindeterminateに設定できます。

vue
<script setup>
import { Icon } from '@iconify/vue'
import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'

const checked = ref('indeterminate')
</script>

<template>
  <CheckboxRoot v-model:checked="checked">
    <CheckboxIndicator>
      <Icon
        v-if="checked === 'indeterminate'"
        icon="radix-icons:divider-horizontal"
      />
      <Icon
        v-if="checked"
        icon="radix-icons:check"
      />
    </CheckboxIndicator>
  </CheckboxRoot>

  <button
    type="button"
    @click="() => (checked === 'indeterminate' ? (checked = false) : (checked = 'indeterminate'))"
  >
    Toggle indeterminate
  </button>
</template>

アクセシビリティ ​

三状態チェックボックス WAI-ARIA デザインパターンに準拠しています。

キーボード操作 ​

キー説明
スペース
チェックボックスをオン/オフにします