Radio ラジオ - Vant 4

🔘 Radio ラジオ

🎯 紹介

Radio は候補から単一選択を行うコンポーネントです。垂直/水平配置、無効化、アイコンカスタマイズに対応し、フォーム選択に適しています。

📦 導入

以下の方法でコンポーネントをグローバル登録します。詳細はコンポーネント登録を参照してください。

import { createApp } from'vue'; import { RadioGroup, Radio } from'vant'; const app = createApp(); app.use(Radio); app.use(RadioGroup);

🎯 コード例

🔧 基本用法

もっともシンプルな使い方。v-model で選択中の name をバインドし、複数候補から一つを選べます。

html

<template>
  <van-radio-group v-model="checked">
    <van-radio name="1">ラジオ 1</van-radio>
    <van-radio name="2">ラジオ 2</van-radio>
  </van-radio-group>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const checked = ref('1');
    return { checked };
  },
};
</script>

↔️ 水平配置

direction を horizontal にすると、横並びのレイアウトになります。少数の選択肢に適しています。

html

<template>
  <van-radio-group v-model="checked" direction="horizontal">
    <van-radio name="1">ラジオ 1</van-radio>
    <van-radio name="2">ラジオ 2</van-radio>
  </van-radio-group>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const checked = ref('1');
    return { checked };
  },
};
</script>

🚫 無効状態

一部の選択肢を無効化したい場合は、disabled 属性でグループまたは個別に無効化できます。

html

<template>
  <van-radio-group v-model="checked" disabled>
    <van-radio name="1">ラジオ 1</van-radio>
    <van-radio name="2">ラジオ 2</van-radio>
  </van-radio-group>

  <van-radio-group v-model="checked2">
    <van-radio name="1">ラジオ 1</van-radio>
    <van-radio name="2" disabled>ラジオ 2</van-radio>
  </van-radio-group>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const checked = ref('1');
    const checked2 = ref('1');
    return { checked, checked2 };
  },
};
</script>

🔲 形状のカスタマイズ

円形以外にも square（四角）や dot（ドット）を選べます。shape 属性で変更してください。

html

<template>
  <van-radio-group v-model="checked">
    <van-radio name="1" shape="square">四角</van-radio>
    <van-radio name="2" shape="dot">ドット</van-radio>
  </van-radio-group>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const checked = ref('1');
    return { checked };
  },
};
</script>

🎨 色のカスタマイズ

checked-color で選択色をブランドカラーに設定できます。

html

<template>
  <van-radio-group v-model="checked">
    <van-radio name="1" checked-color="#ee0a24">赤</vanradio>
    <van-radio name="2" checked-color="#07c160">緑</van-radio>
  </van-radio-group>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const checked = ref('1');
    return { checked };
  },
};
</script>

📏 サイズのカスタマイズ

icon-size でアイコンサイズを調整します。数値・文字列いずれも対応。

html

<template>
  <van-radio-group v-model="checked">
    <van-radio name="1" icon-size="24px">大きいアイコン</van-radio>
    <van-radio name="2" icon-size="16px">小さいアイコン</van-radio>
  </van-radio-group>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const checked = ref('1');
    return { checked };
  },
};
</script>

🖼️ アイコンのカスタマイズ（スロット）

icon スロットでアイコンをカスタマイズし、slotProps で選択状態を判定できます。

html

<template>
  <van-radio-group v-model="checked">
    <van-radio name="1">
      <template #icon="props">
        <img :src="props.checked ? activeIcon : inactiveIcon" />
      </template>
      カスタムアイコン
    </van-radio>
    <van-radio name="2">
      <template #icon="props">
        <van-icon :name="props.checked ? 'star' : 'star-o'" />
      </template>
      星アイコン
    </van-radio>
  </van-radio-group>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const checked = ref('1');
    return {
      checked,
      activeIcon: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
      inactiveIcon: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
    };
  },
};
</script>

⬅️ 左側テキスト

テキストを左側に表示するには、label-position を left に設定します。

html

<template>
  <van-radio-group v-model="checked">
    <van-radio name="1" label-position="left">左側テキスト</van-radio>
    <van-radio name="2" label-position="left">左側テキスト</van-radio>
  </van-radio-group>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const checked = ref('1');
    return { checked };
  },
};
</script>

🚫 テキストクリックの無効化

アイコンのみで選択させたい場合は、label-disabled を設定するとテキストクリックでは選択されません。

html

<template>
  <van-radio-group v-model="checked">
    <van-radio name="1" label-disabled>アイコンのみクリック可能</van-radio>
    <van-radio name="2" label-disabled>アイコンのみクリック可能</van-radio>
  </van-radio-group>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const checked = ref('1');
    return { checked };
  },
};
</script>

📱 Cell コンポーネントとの併用

よりリッチなリストスタイルにするには、Cell と併用して設定画面のような選択リストを構築できます。

html

<template>
  <van-radio-group v-model="checked">
    <van-cell-group>
      <van-cell title="ラジオ 1" clickable @click="checked = '1'">
        <template #right-icon>
          <van-radio name="1" />
        </template>
      </van-cell>
      <van-cell title="ラジオ 2" clickable @click="checked = '2'">
        <template #right-icon>
          <van-radio name="2" />
        </template>
      </van-cell>
    </van-cell-group>
  </van-radio-group>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const checked = ref('1');
    return { checked };
  },
};
</script>

📋 API

Radio Props

属性名	説明	型	デフォルト
name	🏷️ 識別子（文字列/数値）	any	-
shape	🔲 形状（`round`、`square`、`dot`）	string	`round`
disabled	🚫 無効化	boolean	`false`
label-disabled	🖱️ テキストクリックを無効化	boolean	`false`
label-position	📍 テキスト位置（`left`/`right`）	string	`right`
icon-size	📏 アイコンサイズ（デフォルト単位は `px`）	number \| string	`20px`
checked-color	🎨 選択時の色	string	`#1989fa`

RadioGroup Props

属性名	説明	型	デフォルト
v-model	🎯 選択中の識別子（双方向バインド）	any	-
disabled	🚫 全ラジオを無効化	boolean	`false`
direction	📐 配置方向（`vertical`/`horizontal`）	string	`vertical`
icon-size	📏 アイコンサイズの一括設定	number \| string	`20px`
checked-color	🎨 選択時の色の一括設定	string	`#1989fa`
shape `v4.6.3`	🔲 形状の一括設定（`round`、`square`、`dot`）	string	`round`

Radio Events

イベント名	説明	コールバック引数
click	🖱️ ラジオ（アイコン/テキスト）クリック時に発火	event: MouseEvent

RadioGroup Events

イベント名	説明	コールバック引数
change	🔄 選択値の変化時に発火	name: string

Radio Slots

名称	説明	パラメータ
default	📝 テキストのカスタマイズ	{ checked: boolean, disabled: boolean }
icon	🖼️ アイコンのカスタマイズ	{ checked: boolean, disabled: boolean }

🔧 型定義

コンポーネントは以下の型定義をエクスポートし、TypeScript 開発を容易にします：

import type {
  RadioProps,
  RadioShape,
  RadioGroupProps,
  RadioLabelPosition,
  RadioGroupDirection,
} from 'vant';

🎨 テーマカスタマイズ

🎭 スタイル変数

コンポーネントは以下の CSS 変数を提供しており、カスタムスタイルに使用できます。使用方法については ConfigProvider コンポーネントを参照してください。

名称	デフォルト値	説明
--van-radio-size	20px	📏 ラジオアイコンのサイズ
--van-radio-dot-size	8px	🔘 ドット形状の内部サイズ
--van-radio-border-color	var(--van-gray-5)	🖼️ 未選択時の枠線色
--van-radio-duration	var(--van-duration-fast)	⏱️ 選択切替のアニメーション時間
--van-radio-label-margin	var(--van-padding-xs)	📐 ラベルとアイコンの間隔
--van-radio-label-color	var(--van-text-color)	🔤 ラベルの色
--van-radio-checked-icon-color	var(--van-primary-color)	✅ 選択時アイコンの色
--van-radio-disabled-icon-color	var(--van-gray-5)	🚫 無効時アイコンの色
--van-radio-disabled-label-color	var(--van-text-color-3)	🔇 無効時ラベルの色
--van-radio-disabled-background	var(--van-border-color)	🎭 無効時の背景色

📚 関連ドキュメント

🔗 フォームコンポーネント

Checkbox チェックボックス - ☑️ 複数選択の相棒。全選択・ハーフ選択など
Field 入力欄 - ✏️ 検証・整形対応の入力コンポーネント
Form フォーム - 📋 検証とデータ収集の総合ソリューション
Switch スイッチ - 🔄 ブール値選択に最適

🎯 セレクターコンポーネント

Picker ピッカー - 🎡 ローラー式セレクター。大量選択肢に適用
Area 地域選択 - 🗺️ 3 階層の地域選択に対応

🎨 インタラクションコンポーネント

Button ボタン - 🔘 送信ボタンなど
Cell セル - 📱 リスト表示。ラジオとの併用に適切
ActionSheet アクションパネル - 📋 ボトムシート式の選択パネル

🛠️ ツールコンポーネント

ConfigProvider グローバル設定 - ⚙️ グローバルテーマ設定
Toast トースト - 💬 操作フィードバック

🔘 Radio ラジオ ​

🎯 紹介 ​

📦 導入 ​

🎯 コード例 ​

🔧 基本用法 ​

↔️ 水平配置 ​

🚫 無効状態 ​

🔲 形状のカスタマイズ ​

🎨 色のカスタマイズ ​

📏 サイズのカスタマイズ ​

🖼️ アイコンのカスタマイズ（スロット） ​

⬅️ 左側テキスト ​

🚫 テキストクリックの無効化 ​

📱 Cell コンポーネントとの併用 ​

📋 API ​

Radio Props ​

RadioGroup Props ​

Radio Events ​

RadioGroup Events ​

Radio Slots ​

🔧 型定義 ​

🎨 テーマカスタマイズ ​

🎭 スタイル変数 ​

📚 関連ドキュメント ​

🔗 フォームコンポーネント ​

🎯 セレクターコンポーネント ​

🎨 インタラクションコンポーネント ​

🛠️ ツールコンポーネント ​

🔘 Radio ラジオ

🎯 紹介

📦 導入

🎯 コード例

🔧 基本用法

↔️ 水平配置

🚫 無効状態

🔲 形状のカスタマイズ

🎨 色のカスタマイズ

📏 サイズのカスタマイズ

🖼️ アイコンのカスタマイズ（スロット）

⬅️ 左側テキスト

🚫 テキストクリックの無効化

📱 Cell コンポーネントとの併用

📋 API

Radio Props

RadioGroup Props

Radio Events

RadioGroup Events

Radio Slots

🔧 型定義

🎨 テーマカスタマイズ

🎭 スタイル変数

📚 関連ドキュメント

🔗 フォームコンポーネント

🎯 セレクターコンポーネント

🎨 インタラクションコンポーネント

🛠️ ツールコンポーネント