フォームラジオ

クロスブラウザの一貫性のために、<b-form-radio-group> と <b-form-radio> は、ブラウザのデフォルトのラジオ入力を置き換えるために、Bootstrapのカスタムラジオ入力を使用します。セマンティックでアクセス可能なマークアップの上に構築されているため、デフォルトのラジオ入力の確実な代替となります。

個々のラジオ

<template>
  <div>
    <b-form-group label="Individual radios" v-slot="{ ariaDescribedby }">
      <b-form-radio v-model="selected" :aria-describedby="ariaDescribedby" name="some-radios" value="A">Option A</b-form-radio>
      <b-form-radio v-model="selected" :aria-describedby="ariaDescribedby" name="some-radios" value="B">Option B</b-form-radio>
    </b-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: ''
      }
    }
  }
</script>

<!-- b-form-radio.vue -->

グループ化されたラジオ

<b-form-radio-group> 内の個々のラジオ入力は、options プロップ、または <b-form-radio> サブコンポーネントの手動配置によって指定できます。 <b-form-radio-group> 内に手動で配置された <b-form-radio> コンポーネントを使用すると、ほとんどのプロップと <b-form-radio-group> からの v-model を継承します。

<template>
  <div>
    <b-form-group label="Radios using options" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="radio-group-1"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radio-options"
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Radios using sub-components" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="radio-group-2"
        v-model="selected"
        :aria-describedby="ariaDescribedby"
        name="radio-sub-component"
      >
        <b-form-radio value="first">Toggle this custom radio</b-form-radio>
        <b-form-radio value="second">Or toggle this other custom radio</b-form-radio>
        <b-form-radio value="third" disabled>This one is Disabled</b-form-radio>
        <b-form-radio :value="{ fourth: 4 }">This is the 4th radio</b-form-radio>
      </b-form-radio-group>
    </b-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'first',
        options: [
          { text: 'Toggle this custom radio', value: 'first' },
          { text: 'Or toggle this other custom radio', value: 'second' },
          { text: 'This one is Disabled', value: 'third', disabled: true },
          { text: 'This is the 4th radio', value: { fourth: 4 } }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-group.vue -->

<b-form-radio-group> 内で、options プロップと <b-form-radio> を自由に組み合わせてください。手動で配置された <b-form-radio> 入力は、options プロップによって生成されたラジオ入力の下に表示されます。 options によって生成された入力の上に表示させるには、名前付きスロット first に配置します。

<template>
  <div>
    <b-form-group label="Radios using options and slots" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="radio-slots"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radio-options-slots"
      >
        <!-- Radios in this slot will appear first -->
        <template #first>
          <b-form-radio value="first">Toggle this custom radio from slot first</b-form-radio>
        </template>

        <!-- Radios in the default slot will appear after any option generated radios -->
        <b-form-radio :value="{ fourth: 4 }">This is the 4th radio</b-form-radio>
        <b-form-radio value="fifth">This is the 5th radio</b-form-radio>
      </b-form-radio-group>
    </b-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: '',
        options: [
          { text: 'Or toggle this other custom radio', value: 'second' },
          { text: 'Third radio', value: 'third' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-group-slot.vue -->

ラジオグループのオプション配列

options は、文字列またはオブジェクトの配列にすることができます。利用可能なフィールド

value v-model に設定される選択された値
disabled 選択のために項目を無効にします
text 表示テキスト、または html 基本的なインライン HTML を表示します

value は、文字列、数値、または単純なオブジェクトにすることができます。値に複雑な型を使用することは避けてください。

html と text の両方が指定されている場合、html が優先されます。html フィールドでは、基本的な/ネイティブ HTML のみがサポートされています (コンポーネントは機能しません)。すべてのブラウザが、<select> の <option> 要素の内側で、インライン HTML (つまり、<i>、<strong> など) をレンダリングするわけではないことに注意してください。

ユーザーが提供したコンテンツを html フィールドに配置する場合は、まずユーザーが提供した文字列を XSS攻撃の脆弱性から保護するためにサニタイズしないと、危険な場合があります。

const options = ['A', 'B', 'C', { text: 'D', value: { d: 1 }, disabled: true }, 'E', 'F']

配列エントリが文字列の場合、生成される value および text フィールドの両方に使用されます。

配列内で文字列とオブジェクトを混在させることができます。

内部的には、BootstrapVue は上記の配列を次の配列 (オブジェクトの配列) 形式に変換します

const options = [
  { text: 'A', value: 'A', disabled: false },
  { text: 'B', value: 'B', disabled: false },
  { text: 'C', value: 'C', disabled: false },
  { text: 'D', value: { d: 1 }, disabled: true },
  { text: 'E', value: 'E', disabled: false },
  { text: 'F', value: 'F', disabled: false }
]

オブジェクトの配列としてのオプション

const options = [
  { text: 'Item 1', value: 'first' },
  { text: 'Item 2', value: 'second' },
  { html: '<b>Item</b> 3', value: 'third', disabled: true },
  { text: 'Item 4' },
  { text: 'Item 5', value: { foo: 'bar', baz: true } }
]

value がない場合、text は value および text フィールドの両方として使用されます。 html プロパティを使用する場合は、value プロパティを必ず指定してください。

内部的には、BootstrapVue は上記の配列を次の配列 (オブジェクトの配列) 形式に変換します

const options = [
  { text: 'Item 1', value: 'first', disabled: false },
  { text: 'Item 2', value: 'second', disabled: false },
  { html: '<b>Item</b> 3', value: 'third', disabled: true },
  { text: 'Item 4', value: 'Item 4', disabled: false },
  { text: 'Item 5', value: 'E', disabled: false }
]

オプションのフィールド名の変更

(表示 text に name フィールドを使用するなど) フィールドのプロパティ名をカスタマイズする場合は、text-field、html-field、value-field、および disabled-field プロップを使用するプロパティ名を含む文字列に設定することで、簡単に変更できます。

<template>
  <div>
    <b-form-radio-group
      v-model="selected"
      :options="options"
      class="mb-3"
      value-field="item"
      text-field="name"
      disabled-field="notEnabled"
    ></b-form-radio-group>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'A',
        options: [
          { item: 'A', name: 'Option A' },
          { item: 'B', name: 'Option B' },
          { item: 'D', name: 'Option C', notEnabled: true },
          { item: { d: 1 }, name: 'Option D' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-group-options-fields.vue -->

ラジオの値と v-model

<b-form-radio> コンポーネントには、デフォルトで値がありません。<b-form-radio> の value プロップを介して明示的に値を指定する必要があります。この値は、ラジオがオンになったときに v-model に送信されます。

<b-form-radio> と <b-form-radio-group> の v-model は、checked プロップにバインドされます。ラジオを事前にオンにするには、v-model の値をラジオの値のいずれかに設定する必要があります (つまり、ラジオの value プロップで指定された値と一致する必要があります)。 checked プロップを直接使用しないでください。ラジオグループの各ラジオは、一意の値を持っている必要があります。

ラジオは、string、boolean、number、またはプレーン object など、多くの型の値をサポートしています。

インラインまたはスタックされたラジオ

デフォルトでは、<b-form-radio-group> はインラインラジオ入力を生成し、<b-form-radio> はスタックされたラジオを生成します。<b-form-radio-group> の stacked プロップを設定してラジオを互いの上に表示するか、グループにないラジオを使用している場合は、b-form-radio の inline プロップを true に設定してインラインでレンダリングします。

<template>
  <div>
    <b-form-group label="Inline radios (default)" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radio-inline"
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Stacked radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radios-stacked"
        stacked
      ></b-form-radio-group>
    </b-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'first',
        options: [
          { text: 'First radio', value: 'first' },
          { text: 'Second radio', value: 'second' },
          { text: 'Third radio', value: 'third' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-stacked.vue -->

コントロールのサイズ設定

size プロップを使用して、ラジオのサイズを制御します。デフォルトのサイズは medium です。サポートされているサイズの値は、sm (小) と lg (大) です。

<div>
  <b-form-radio name="radio-size" size="sm">Small</b-form-radio>
  <b-form-radio name="radio-size">Default</b-form-radio>
  <b-form-radio name="radio-size" size="lg">Large</b-form-radio>
</div>

<!-- form-radio-sizes.vue -->

サイズは、個々の <b-form-radio> コンポーネントで設定するか、<b-form-radio-group> の size 設定から継承できます。

注: Bootstrap v4.x は、カスタムラジオコントロールのサイズをネイティブにサポートしていません。ただし、BootstrapVue には、カスタムラジオのサイズ設定をサポートするカスタム SCSS/CSS が含まれています。

ボタンスタイルのラジオ

<b-form-radio-group> の buttons プロップを true に設定することで、ボタンのような外観でラジオをレンダリングします。 button-variant プロップを標準の Bootstrap ボタンバリアントの 1 つに設定して、ボタンのバリアントを設定します(サポートされているバリアントについては <b-button> を参照してください)。デフォルトの button-variant は secondary です。

buttons プロップは plain よりも優先され、button-variant は buttons が設定されていない場合は効果がありません。

ボタンスタイルのラジオには、チェックされている状態になると、ラベルにクラス .active が自動的に適用されます。

<template>
  <div>
    <b-form-group label="Button style radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="btn-radios-1"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radios-btn-default"
        buttons
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group
      label="Button style radios with outline-primary variant and size lg"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-radio-group
        id="btn-radios-2"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        button-variant="outline-primary"
        size="lg"
        name="radio-btn-outline"
        buttons
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Stacked button style radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="btn-radios-3"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radio-btn-stacked"
        buttons
        stacked
      ></b-form-radio-group>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'radio1',
        options: [
          { text: 'Radio 1', value: 'radio1' },
          { text: 'Radio 3', value: 'radio2' },
          { text: 'Radio 3 (disabled)', value: 'radio3', disabled: true },
          { text: 'Radio 4', value: 'radio4' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-buttons.vue -->

カスタムスタイルではないラジオ入力 (プレーン)

<b-form-radio> と <b-form-radio-group> が plain プロップを設定することで、ブラウザネイティブスタイルのラジオ入力をレンダリングするようにすることができます。

<template>
  <div>
    <b-form-group label="Plain inline radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="plain-inline"
        plain
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Plain stacked radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="plain-stacked"
        plain
        stacked
      ></b-form-radio-group>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'first',
        options: [
          { text: 'First radio', value: 'first' },
          { text: 'Second radio', value: 'second' },
          { text: 'Third radio', value: 'third' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-plain.vue -->

注: plain は、buttons/button が設定されている場合は効果がありません。

必須の制約

個々の <b-form-radio> コンポーネント (<b-form-radio-group> 内ではない) を使用していて、フォームでラジオを required にする必要がある場合は、必須の制約が機能するためには、各 <b-form-radio> に name を指定する必要があります。同じ v-model に関連付けられているすべての <b-form-radio> コンポーネントは、同じ name を持つ必要があります。

名前は、支援技術 (スクリーンリーダーやキーボードのみのユーザーなど) がどのラジオが同じフォーム変数に属しているかを知るために必要です (名前は、ネイティブブラウザーのキーボードナビゲーションも自動的に有効にします)。したがって、required は name が設定されている場合にのみ機能します。 <b-form-radio-group> は、グループに名前が指定されていない場合、自動的に一意の入力名を生成します。

オートフォーカス

autofocus プロップが <b-form-radio> に設定されている場合、ドキュメントに挿入 (つまり、マウント) されたとき、または Vue <keep-alive> コンポーネント内で再アクティブ化されたときに、入力が自動的にフォーカスされます。このプロップは、入力に autofocus 属性を設定したり、入力が表示されるタイミングを認識したりすることはないことに注意してください。

コンテキストステート

Bootstrapには、ほとんどのフォームコントロールに対して、valid および invalid ステートの検証スタイルが含まれています。

一般的に、特定の種類のフィードバックには特定のステートを使用することが推奨されます。

false（無効な状態を示す）は、必須フィールドやブロックが必要な場合に最適です。ユーザーはフォームを送信するために、このフィールドを適切に入力する必要があります。
true（有効な状態を示す）は、フォーム全体でフィールドごとの検証を行い、残りのフィールドを埋めるようにユーザーを促したい場合に理想的です。
null 検証状態を表示しません（有効でも無効でもない）。

<b-form-radio>にコンテキストステートアイコンを適用するには、state プロパティを false（無効の場合）、true（有効の場合）、または null（検証状態がない場合）に設定します。

注意: コンテキストステートは、ボタンモードでレンダリングされたラジオではサポートされていません。

フィードバック付きのコンテキストステートの例

<template>
  <div>
    <b-form-radio-group v-model="value" :options="options" :state="state" name="radio-validation">
      <b-form-invalid-feedback :state="state">Please select one</b-form-invalid-feedback>
      <b-form-valid-feedback :state="state">Thank you</b-form-valid-feedback>
    </b-form-radio-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: null,
        options: [
          { text: 'First radio', value: 'first' },
          { text: 'Second radio', value: 'second' },
          { text: 'Third radio', value: 'third' }
        ]
      }
    },
    computed: {
      state() {
        return Boolean(this.value)
      }
    }
  }
</script>

<!-- b-form-radio-validation.vue -->

支援技術や色覚異常のユーザーにコンテキスト検証ステートを伝える

これらのコンテキストステートを使用してフォームコントロールの状態を示すことは、視覚的な色に基づく表示を提供するだけです。これは、スクリーンリーダーなどの支援技術のユーザーや色覚異常のユーザーには伝わりません。

状態の代替表示も提供するようにしてください。たとえば、フォームコントロールの <label> テキスト自体に状態に関するヒントを含めるか、追加のヘルプテキストブロック（例：<b-form-invalid-feedback>）を提供することができます。特に支援技術の場合は、無効なフォームコントロールに aria-invalid="true" 属性を割り当てることもできます（下記参照）。

ARIA `aria-invalid` 属性

<b-form-radio-group> に無効なコンテキストステート（つまり、state = false）がある場合は、<b-form-radio-group> のプロパティ aria-invalid を true に設定することもできます。

サポートされている aria-invalid の値は次のとおりです。

false（デフォルト）エラーは検出されませんでした。
true 値の検証に失敗しました。

state プロパティが false の場合、aria-invalid は自動的に true に設定されます。

コンポーネントリファレンス

`<b-form-radio-group>`

ソースを表示

<b-form-radio-group> コンポーネントエイリアス
<b-form-radio-group> プロパティ
<b-form-radio-group> v-model
<b-form-radio-group> スロット
<b-form-radio-group> イベント

コンポーネントエイリアス

<b-form-radio-group> は、次のエイリアスでも使用できます。

<b-radio-group>

注: コンポーネントエイリアスは、BootstrapVue全体をインポートするか、コンポーネントグループプラグインを使用する場合にのみ使用可能です。

プロパティ

すべてのプロパティのデフォルト値は、グローバルに設定可能です。

プロパティ（昇順にソートするにはクリック）	タイプ（昇順にソートするにはクリック）	デフォルト	説明
`aria-invalid`	`Boolean` または `String`	`false`	ラッパー要素に 'aria-invalid' 属性値を設定します。指定されていない場合、'state' プロパティが属性を制御します。
`autofocus`	`Boolean`	`false`	`true` に設定すると、マウント時またはキープアライブで再アクティブ化されたときに、コントロールに自動的にフォーカスを当てようとします。コントロールに `autofocus` 属性は設定しません。
`button-variant`	`String`		ボタン形式のラジオに適用するBootstrapコンテキストカラーテーマバリアントを指定します。
`buttons`	`Boolean`	`false`	設定すると、このグループのラジオがボタン形式でレンダリングされます。
`checked` v-model	`Any`		グループ内でチェックされているラジオの現在の値
`disabled`	`Boolean`	`false`	`true` に設定すると、コンポーネントの機能を無効にし、無効状態にします。
`disabled-field`	`String`	`'disabled'`	`options` 配列で無効状態に使用する必要があるフィールド名。
`form`	`String`		フォームコントロールが属するフォームのID。コントロールに `form` 属性を設定します。
`html-field` 注意して使用してください	`String`	`'html'`	テキストフィールドの代わりにHTMLラベルに使用する必要がある`options` 配列内のフィールド名。
`id`	`String`		レンダリングされたコンテンツに `id` 属性を設定するために使用され、必要に応じて追加の要素IDを生成するためのベースとして使用されます。
`name`	`String`		フォームコントロールに `name` 属性の値を設定します。
`options`	`Array` または `Object`	`[]`	コンポーネントでレンダリングするアイテムの配列。
`plain`	`Boolean`	`false`	フォームコントロールをカスタムスタイルモードではなく、プレーンモードでレンダリングします。
`required`	`Boolean`	`false`	フォームコントロールに `required` 属性を追加します。
`size`	`String`		コンポーネントの外観のサイズを設定します。'sm'、'md' (デフォルト)、または 'lg'。
`stacked`	`Boolean`	`false`	設定すると、ラジオグループがスタックモードでレンダリングされます。
`state`	`Boolean`	`null`	コンポーネントの検証状態の表示を制御します。`true` は有効、`false` は無効、`null` は検証状態なしです。
`text-field`	`String`	`'text'`	`options` 配列でテキストラベルに使用する必要があるフィールド名。
`validated`	`Boolean`	`false`	設定すると、Bootstrapクラス 'was-validated' がグループラッパーに追加されます。
`value-field`	`String`	`'value'`	`options` 配列で値に使用する必要があるフィールド名。

注意: HTML文字列をサポートするプロパティ (*-html) は、生のユーザーが提供した値を渡すと、クロスサイトスクリプティング（XSS）攻撃に対して脆弱になる可能性があります。最初にユーザー入力を適切にサニタイズする必要があります！

`v-model`

プロパティ	イベント
`checked`	`input`

スロット

名前	説明
`default`	フォームラジオグループに配置するコンテンツ（フォームラジオ）。
`first`	optionsプロパティから生成されたラジオの前に表示されるようにb-form-radioを配置するスロット。

イベント

イベント	引数	説明
`change`	`checked` - ラジオグループの現在選択されている値	ユーザー操作によって選択された値が変更されたときに発行されます。
`input`	`checked` - ラジオグループの現在選択されている値	選択された値が変更されたときに発行されます。

`<b-form-radio>`

ソースを表示

<b-form-radio> コンポーネントエイリアス
<b-form-radio> プロパティ
<b-form-radio> v-model
<b-form-radio> スロット
<b-form-radio> イベント

コンポーネントエイリアス

<b-form-radio> は、次のエイリアスでも使用できます。

<b-radio>

注: コンポーネントエイリアスは、BootstrapVue全体をインポートするか、コンポーネントグループプラグインを使用する場合にのみ使用可能です。

プロパティ

すべてのプロパティのデフォルト値は、グローバルに設定可能です。

プロパティ（昇順にソートするにはクリック）	タイプ（昇順にソートするにはクリック）	デフォルト	説明
`aria-label`	`String`		レンダリングされた要素に `aria-label` 属性の値を設定します。
`aria-labelledby`	`String`		このコンポーネントのラベルを提供する要素のID。 `aria-labelledby` 属性の値として使用されます。
`autofocus`	`Boolean`	`false`	`true` に設定すると、マウント時またはキープアライブで再アクティブ化されたときに、コントロールに自動的にフォーカスを当てようとします。コントロールに `autofocus` 属性は設定しません。
`button`	`Boolean`	`false`	設定すると、ラジオがボタンの外観でレンダリングされます。
`button-variant`	`String`		'button' モードの場合、Bootstrapのテーマカラーのいずれかを適用します。
`checked` v-model	`Any`	`null`	ラジオの現在の値。
`disabled`	`Boolean`	`false`	`true` に設定すると、コンポーネントの機能を無効にし、無効状態にします。
`form`	`String`		フォームコントロールが属するフォームのID。コントロールに `form` 属性を設定します。
`id`	`String`		レンダリングされたコンテンツに `id` 属性を設定するために使用され、必要に応じて追加の要素IDを生成するためのベースとして使用されます。
`inline`	`Boolean`	`false`	設定すると、ラジオが100％幅のブロックとしてではなく、インライン要素としてレンダリングされます。
`name`	`String`		フォームコントロールに `name` 属性の値を設定します。
`plain`	`Boolean`	`false`	フォームコントロールをカスタムスタイルモードではなく、プレーンモードでレンダリングします。
`required`	`Boolean`	`false`	フォームコントロールに `required` 属性を追加します。
`size`	`String`		コンポーネントの外観のサイズを設定します。'sm'、'md' (デフォルト)、または 'lg'。
`state`	`Boolean`	`null`	コンポーネントの検証状態の表示を制御します。`true` は有効、`false` は無効、`null` は検証状態なしです。
`value`	`Any`		このラジオがチェックされたときに返される値。

`v-model`

プロパティ	イベント
`checked`	`input`

スロット

名前	説明
`default`	フォームラジオに配置するコンテンツ。

イベント

イベント	引数	説明
`change`	`checked` - ラジオグループの現在選択されている値	ユーザー操作によって選択された値が変更されたときに発行されます。
`input`	`checked` - ラジオグループの現在選択されている値	選択された値が変更されたときに発行されます。

個々のコンポーネントのインポート

次の名前付きエクスポートを介して、個々のコンポーネントをプロジェクトにインポートできます。

コンポーネント	名前付きエクスポート	インポートパス
`<b-form-radio-group>`	`BFormRadioGroup`	`bootstrap-vue`
`<b-form-radio>`	`BFormRadio`	`bootstrap-vue`

例

import { BFormRadioGroup } from 'bootstrap-vue'
Vue.component('b-form-radio-group', BFormRadioGroup)

Vue.jsプラグインとしてインポート

このプラグインには、上記にリストされたすべての個々のコンポーネントが含まれています。プラグインには、コンポーネントエイリアスも含まれています。

名前付きエクスポート	インポートパス
`FormRadioPlugin`	`bootstrap-vue`

例

import { FormRadioPlugin } from 'bootstrap-vue'
Vue.use(FormRadioPlugin)

個々のラジオ

グループ化されたラジオ

ラジオグループのオプション配列

オブジェクトの配列としてのオプション

オプションのフィールド名の変更

ラジオの値と v-model

インラインまたはスタックされたラジオ

コントロールのサイズ設定

ボタンスタイルのラジオ

カスタムスタイルではないラジオ入力 (プレーン)

必須の制約

オートフォーカス

コンテキストステート

フィードバック付きのコンテキストステートの例

支援技術や色覚異常のユーザーにコンテキスト検証ステートを伝える

ARIA aria-invalid 属性

コンポーネントリファレンス

コンポーネントエイリアス

プロパティ

v-model

スロット

イベント

コンポーネントエイリアス

プロパティ

v-model

スロット

イベント

個々のコンポーネントのインポート

Vue.jsプラグインとしてインポート

ARIA `aria-invalid` 属性

`v-model`

`v-model`