回報問題編輯此頁

表單單選按鈕

為了在不同瀏覽器中保持一致性，<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 }
]

變更選項欄位名稱

如果你要自訂欄位屬性名稱（例如使用 name 欄位顯示 text），你可以輕鬆地透過設定 text-field、html-field、value-field 和 disabled-field prop 成一個包含你想要使用的屬性名稱的字串，來改變它們

<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 prop 明確提供一個值。當單選按鈕被選取時，這個值會被傳送給 v-model 。

<b-form-radio> 和 <b-form-radio-group> 的 v-model 會繫結到 checked prop。要預先選取單選按鈕，你必須將 v-model 值設定為單選按鈕的值之一（例如，必須與單選按鈕的其中一個 value prop 指定的值相符）。不要直接使用 checked prop。單選按鈕群組中的每個單選按鈕必須有獨特的值。

單選按鈕支援多種類型的值，例如 字串、布林值、數字 或純粹的 物件。

內聯或堆疊的單選按鈕

預設的 <b-form-radio-group> 會產生內聯的單選按鈕輸入，而 <b-form-radio> 會產生堆疊的單選按鈕。在 <b-form-radio-group> 中設定 prop stacked 可讓單選按鈕一個在另一個的上方顯示，或者當沒有在群組中使用單選按鈕時，在 b-form-radio 中設定 inline prop 為 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 prop 來控制單選按鈕的大小。預設大小為中等。支援的大小值有 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，新增了單選按鈕大小調整的支援。

按鈕樣式的選項按鈕

透過將 buttons 屬性設為 true 於 <b-form-radio-group> 上，讓選項按鈕呈現按鈕的外觀。透過將 button-variant 屬性設為其中一個標準 Bootstrap 按鈕變形（請參閱 <b-button> 以查看支援的變形）來設定按鈕變形。預設 button-variant 為 secondary。

buttons 屬性優先於 plain，且若 buttons 未設定，button-variant 則無作用。

按鈕樣式的選項按鈕將在其檢查狀態時自動在其標籤套用類別.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 -->

非自訂樣式選項按鈕輸入元件 (純文字)

您可以透過設定 plain 屬性，讓 <b-form-radio> 和 <b-form-radio-group> 呈現瀏覽器原生樣式的選項按鈕輸入元件。

<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 -->

請注意：若 buttons/button 有設定，plain 則不會有任何作用。

必填限制

當您在您的表單中使用個別 <b-form-radio> 元件（而非 <b-form-radio-group>），且您希望選項按鈕設為 required 時，您必須在每個 <b-form-radio> 上提供一個 name，才能讓必填限制發揮作用。繫結至相同 v-model 的所有 <b-form-radio> 元件必須擁有相同的 name。

為了讓輔助科技（例如螢幕朗讀機和僅使用鍵盤的使用者）知道哪些選項按鈕屬於同一表單變數（此名稱也自動開啟原生瀏覽器的鍵盤導覽），name 是必需的，因此僅當設定 name 時，required 才會發揮作用。若組群未提供 name，<b-form-radio-group> 則會自動產生唯一的輸入名稱。

自動聚焦

當在 <b-form-radio> 設置 autofocus 屬性時，輸入會在插入（即載入）文件或在 Vue <keep-alive> 組件中再次啟用時自動對焦。請注意此屬性不會在輸入中設定 autofocus 屬性，也無法判斷何時輸入變為可見。

內容狀態

Bootstrap 包含大多數表單控制項的 有效 和 無效 狀態的驗證樣式。

一般來說，你會想要為特定類型的回饋使用特定的狀態

  • 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> 有無效的脈絡狀態（例如狀態 = false），則您可能還想將 <b-form-radio-group> 道具 aria-invalid 設為 true。

受支援的 aria-invalid 值為

  • false（預設值）沒有偵測錯誤
  • true 此值驗證失敗。

aria-invalid 如果 state 道具為 false，則自動設為 true。

元件參考

<b-form-radio-group>

檢視來源

元件別名

<b-form-radio-group> 也可用透過以下別名使用

  • <b-radio-group>

注意：元件別名僅在匯入所有 BootstrapVue 或使用元件群組外掛程式才可以使用。

屬性

所有預設屬性值都是 全域性可調整。

屬性
（按一下以升冪排序）
類型
（按一下以升冪排序）
預設值
描述
aria-invalid
Boolean 或 Stringfalse設定包裝元素上的 'aria-invalid' 屬性值。若未提供，'state' 道具將控制屬性
autofocus
Booleanfalse設為 `true` 時，嘗試在控制元件掛載，或在 keep-alive 中重新啟用時自動對焦元件。不會在控制元件上設定 `autofocus` 屬性
button-variant
String指定 Bootstrap 脈絡色彩主題變體，適用於按鈕樣式單選按鈕
buttons
Booleanfalse設定後，會以按鈕樣式呈現此群組中的單選按鈕
checked
v-model 		Any群組中目前的已核取單選按鈕
disabled
Booleanfalse設為 `true` 時，停用元件功能並將其設為停用狀態
disabled-field
String'disabled'`options` 陣列中用於停用狀態的欄位名稱
form
String表單控制項所屬的表單 ID。在控制項上設定 `form` 屬性
html-field
用於小心 		String'html'`options` 陣列中用於 html 標籤（而非文字欄位）的欄位名稱
id
String用於設定已呈現內容的 `id` 屬性，並做為視需要產生任何其他元素 ID 的基礎
name
String設定表單控制項 `name` 屬性的值
options
陣列或 物件[]元件中要呈現的項目陣列
plain
Booleanfalse以純文字模式呈現表單控制項，而非自訂樣式模式
required
Booleanfalse將 `required` 屬性新增至表單控制項
size
String設定元件顯示的大小。'sm'、'md' (預設) 或 'lg'
stacked
Booleanfalse設定時，以堆疊模式呈現單選按鈕組
state
Booleannull控制元件的驗證狀態顯示。`true` 為有效，`false` 為無效，`null` 為無驗證狀態
text-field
String'text'`options` 陣列中用於文字標籤的欄位名稱
validated
Booleanfalse設定時，將 Bootstrap 類別 'was-validated' 新增至群組包裝器
value-field
String'value'`options` 陣列中用於值的欄位名稱

注意：支援 HTML 字串 (*-html) 的屬性在傳入未經處理的使用者提供的值時，容易遭受 跨網站指令碼 (XSS) 攻擊。您必須先適當地 清除 使用者輸入資料！

v-model

屬性
事件
checkedinput

插槽

名稱
描述
default 要置入單選按鈕群組中的內容（表單單選按鈕）
first 置入 b-form-radio 的插槽，使它們出現在由 options 屬性產生的單選按鈕之前

事件

事件
參數
描述
變更
  1. checked - 目前 radio 群組選取的值
於使用者互動變更選取值時發出
input
  1. checked - 目前 radio 群組選取的值
選取值變更時發出

<b-form-radio>

檢視來源

元件別名

<b-form-radio> 可透過以下別名使用

  • <b-radio>

注意：元件別名僅在匯入所有 BootstrapVue 或使用元件群組外掛程式才可以使用。

屬性

所有預設屬性值都是 全域性可調整。

屬性
（按一下以升冪排序）
類型
（按一下以升冪排序）
預設值
描述
aria-label
String設定已渲染元素上 `aria-label` 屬性的值
aria-labelledby
String提供此元件標籤的元素 ID。用作 `aria-labelledby` 屬性的值
autofocus
Booleanfalse設為 `true` 時，嘗試在控制元件掛載，或在 keep-alive 中重新啟用時自動對焦元件。不會在控制元件上設定 `autofocus` 屬性
button
Booleanfalse設定後，以按鈕的外觀呈現 radio
button-variant
String使用「按鈕」模式時套用 Bootstrap 的一種主題色
checked
v-model 		Anynullradio(s) 的目前值
disabled
Booleanfalse設為 `true` 時，停用元件功能並將其設為停用狀態
form
String表單控制項所屬的表單 ID。在控制項上設定 `form` 屬性
id
String用於設定已呈現內容的 `id` 屬性，並做為視需要產生任何其他元素 ID 的基礎
inline
Booleanfalse設定後，以內嵌元素方式呈現 radio，而不是 100% 寬度的區塊
name
String設定表單控制項 `name` 屬性的值
plain
Booleanfalse以純文字模式呈現表單控制項，而非自訂樣式模式
required
Booleanfalse將 `required` 屬性新增至表單控制項
size
String設定元件顯示的大小。'sm'、'md' (預設) 或 'lg'
state
Booleannull控制元件的驗證狀態顯示。`true` 為有效，`false` 為無效，`null` 為無驗證狀態
value
Any此 radio 勾選時回傳的值

v-model

屬性
事件
checkedinput

插槽

名稱
描述
default 置入 form radio 的內容

事件

事件
參數
描述
變更
  1. checked - 目前 radio 群組選取的值
於使用者互動變更選取值時發出
input
  1. checked - 目前 radio 群組選取的值
選取值變更時發出

匯入個別元件

你可以透過以下具名稱的匯出，將個別元件匯入專案

元件
具名稱的匯出
匯入路徑
<b-form-radio-group>BFormRadioGroupbootstrap-vue
<b-form-radio>BFormRadiobootstrap-vue

範例

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

以 Vue.js 外掛方式匯入

此外掛包含上述列出的所有個別元件. 外掛也包含所有元件別名。

具名稱的匯出
匯入路徑
FormRadioPluginbootstrap-vue

範例

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