回報問題編輯此頁面

表單核取方塊

為了在各瀏覽器中保持一致性，<b-form-checkbox-group> 與 <b-form-checkbox> 會使用 Bootstrap 的自訂核取方塊輸入控制元件，來替換瀏覽器預設的核取方塊輸入控制元件。它建立在語意且可協助存取的標記基礎上，因此是預設核取方塊輸入控制元件的完美替代品。

範例 1：單一核取方塊

<template>
  <div>
    <b-form-checkbox
      id="checkbox-1"
      v-model="status"
      name="checkbox-1"
      value="accepted"
      unchecked-value="not_accepted"
    >
      I accept the terms and use
    </b-form-checkbox>

    <div>State: <strong>{{ status }}</strong></div>
  </div>
</template>

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

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

範例 2：多選核取方塊

<template>
  <div>
    <b-form-group label="Using options array:" v-slot="{ ariaDescribedby }">
      <b-form-checkbox-group
        id="checkbox-group-1"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="flavour-1"
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group label="Using sub-components:" v-slot="{ ariaDescribedby }">
      <b-form-checkbox-group
        id="checkbox-group-2"
        v-model="selected"
        :aria-describedby="ariaDescribedby"
        name="flavour-2"
      >
        <b-form-checkbox value="orange">Orange</b-form-checkbox>
        <b-form-checkbox value="apple">Apple</b-form-checkbox>
        <b-form-checkbox value="pineapple">Pineapple</b-form-checkbox>
        <b-form-checkbox value="grape">Grape</b-form-checkbox>
      </b-form-checkbox-group>
    </b-form-group>

    <div>Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
        options: [
          { text: 'Orange', value: 'orange' },
          { text: 'Apple', value: 'apple' },
          { text: 'Pineapple', value: 'pineapple' },
          { text: 'Grape', value: 'grape' }
        ]
      }
    }
  }
</script>

<!-- b-form-checkbox-multiple.vue -->

您可以在 <b-form-checkbox-group> 中隨意搭配 options 屬性和 <b-form-checkbox>。手動放進 <b-form-checkbox> 輸入控制元件會顯示在由 options 屬性所產生核取方塊輸入控制元件的下方。若要將手動放進的輸入控制元件顯示在由 options 所產生的輸入控制元件的上方，請將它們放置在命名插槽 first 中。

核取方塊群組選項陣列

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 屬性至一個包含您想要的屬性名稱的字串輕鬆地變更它們

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

<script>
  export default {
    data() {
      return {
        selected: [],
        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-checkbox-group-options-fields.vue -->

內嵌和堆疊的核取方塊

<b-form-checkbox-group> 元件預設會呈現內嵌式核取方塊，而 <b-form-checkbox> 則會呈現區塊級別（堆疊）的核取方塊。

在 <b-form-checkbox-group> 上設定 stacked 屬性以將每一個表單控制項置於彼此的上方，或是在未於 <b-form-checkbox-group> 內部使用個別核取方塊時，在 <b-form-checkbox> 上設定 inline 屬性。

<template>
  <div>
    <b-form-group
      label="Form-checkbox-group inline checkboxes (default)"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="flavour-1a"
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group
      label="Form-checkbox-group stacked checkboxes"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="flavour-2a"
        stacked
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group
      label="Individual stacked checkboxes (default)"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox
        v-for="option in options"
        v-model="selected"
        :key="option.value"
        :value="option.value"
        :aria-describedby="ariaDescribedby"
        name="flavour-3a"
      >
        {{ option.text }}
      </b-form-checkbox>
    </b-form-group>

    <b-form-group
      label="Individual inline checkboxes"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox
        v-for="option in options"
        v-model="selected"
        :key="option.value"
        :value="option.value"
        :aria-describedby="ariaDescribedby"
        name="flavour-4a"
        inline
      >
        {{ option.text }}
      </b-form-checkbox>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
        options: [
          { text: 'Orange', value: 'orange' },
          { text: 'Apple', value: 'apple' },
          { text: 'Pineapple', value: 'pineapple' },
          { text: 'Grape', value: 'grape' }
        ]
      }
    }
  }
</script>

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

控制大小

使用 size 屬性控制核取方塊的大小。預設大小為中型。支援的大小值得有 sm（小型）和 lg（大型）。

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

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

大小可以設定在個別 <b-form-checkbox> 元件上，或從 <b-form-checkbox-group> 的大小設定繼承。

注意： Bootstrap v4.x 並未原生支援自訂核取方塊控制項的大小。不過，BootstrapVue 包含自訂 SCSS/CSS，其中新增支援核取方塊大小設定。

核取方塊值和 v-model

預設 <b-form-checkbox> 值勾選時為 true，取消勾選時為 false。您可以分別指定 value 和 unchecked-value 屬性，以自訂勾選和取消勾選的數值。

將 v-model 與 checked 屬性做繫結。如果您有多個與單一資料狀態變數繫結的核取方塊，則 **必須** 提供陣列參考項 ([]) 給您的 v-model。請勿直接使用 checked 屬性。

請注意，當 v-model 與多個核取方塊繫結時 (例如陣列參考項)，框架 **不會** 使用 unchecked-value。繫結於 v-model 陣列中只會傳回勾選核取方塊的數值。您應該提供每個核取方塊 value 屬性唯一的數值 (設定預設值 true 時，繫結到陣列時會失效)

要預選任何選項按鈕，請將 v-model 設定為您想預選的選項按鈕數值。

當在 <b-form-checkbox-group> 內放入個別的 <b-form-checkbox> 組件時，大多數的屬性和 v-model 會從 <b-form-checkbox-group> 繼承。

注意： unchecked-value 屬性不影響原生 <input> 的 value 屬性，因為瀏覽器不會在表單提交時包含未勾選的核取方塊。要確保在原生 <form> 提交時，會提交兩個選項的其中一項數值 (例如 'yes' 或 'no')，請改用選項按鈕輸入。 Vue 對原生核取方塊輸入也有相同的限制。

多個核取方塊與輔助功能

當將多個核取方塊繫結在一起時，必須為群組中的所有 <b-form-checkbox> 單獨設定 name 屬性為相同數值，或透過 <b-form-checkbox-group> 的 name 屬性來設定。這可以告知輔助科技使用者，這些核取方塊相關且可用於瀏覽器的原生鍵盤互動。

只要使用多個核取方塊，建議將這些核取方塊放入 <b-form-group> 組件中，以將標籤與整個核取方塊群組做關聯。請參閱上面的範例。

按鈕樣式的核取方塊

您可選擇將核取方塊渲染成按鈕樣式，不論是個別或群組皆可。

按鈕樣式的核取方塊，在勾選狀態時，其標籤會自動加上類別 .active。

個別核取方塊按鈕樣式

單一核取方塊可透過將 button 屬性設定成 true，渲染為按鈕樣式

透過將 button-variant 屬性設定為 Bootstrap 按鈕變異之一（有關支援的變異，請參閱 <b-button>），來變更按鈕變異。預設變異為 secondary。

<template>
  <div>
    <b-form-checkbox v-model="checked1" name="check-button" button>
      Button Checkbox <b>(Checked: {{ checked1 }})</b>
    </b-form-checkbox>
    <b-form-checkbox v-model="checked2" name="check-button" button button-variant="info">
      Button Checkbox <b>(Checked: {{ checked2 }})</b>
    </b-form-checkbox>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checked1: false,
        checked2: false
      }
    }
  }
</script>

<!-- b-form-checkbox-button.vue -->

個別按鈕樣式的核取方塊不受 inline 屬性影響。

按鈕樣式核取方塊

透過設定 <b-form-checkbox-group> 上的 prop buttons，以按鈕群組樣式呈現核取方塊群組。透過設定 button-variant prop 為任一標準 Bootstrap 按鈕變體（請參閱 <b-button> 以瞭解受支援的變體），從而變更按鈕變體。預設 button-variant 是 secondary。

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

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

    <b-form-group
      label="Stacked (vertical) button-group style checkboxes"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        stacked
        buttons
      ></b-form-checkbox-group>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
        options: [
          { text: 'Orange', value: 'orange' },
          { text: 'Apple', value: 'apple' },
          { text: 'Pineapple', value: 'pineapple' },
          { text: 'Grape', value: 'grape' }
        ]
      }
    }
  }
</script>

<!-- b-form-checkbox-button-group.vue -->

開關樣式核取方塊

開關樣式支援於 <b-form-checkbox> 與 <b-form-checkbox-group> 元件上。

注意：如果核取方塊處於 按鈕模式，開關模式將不起作用。

個別核取方塊開關樣式

透過將 prop switch 設定為 true，可將單一核取方塊呈現為開關樣式。

<template>
  <div>
    <b-form-checkbox v-model="checked" name="check-button" switch>
      Switch Checkbox <b>(Checked: {{ checked }})</b>
    </b-form-checkbox>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checked: false
      }
    }
  }
</script>

<!-- b-form-checkbox-switch.vue -->

群組開關樣式核取方塊

透過設定 <b-form-checkbox-group> 上的 prop switches，以開關樣式呈現核取方塊群組。

<template>
  <div>
    <b-form-group
      label="Inline switch style checkboxes"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        switches
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group
      label="Stacked (vertical) switch style checkboxes"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        switches
        stacked
      ></b-form-checkbox-group>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
        options: [
          { text: 'Red', value: 'red' },
          { text: 'Green', value: 'green' },
          { text: 'Yellow (disabled)', value: 'yellow', disabled: true },
          { text: 'Blue', value: 'blue' }
        ]
      }
    }
  }
</script>

<!-- b-form-checkboxes-switch-group.vue -->

開關調整大小

使用 size prop 控制開關大小。預設大小為中型。支援的大小值包括 sm（小型）與 lg（大型）。

<div>
  <b-form-checkbox switch size="sm">Small</b-form-checkbox>
  <b-form-checkbox switch>Default</b-form-checkbox>
  <b-form-checkbox switch size="lg">Large</b-form-checkbox>
</div>

<!-- form-checkbox-switch-sizes.vue -->

大小可以設定在個別 <b-form-checkbox> 元件上，或從 <b-form-checkbox-group> 的大小設定繼承。

注意：Bootstrap v4.x 不原生支援自訂開關控制項的大小。但是，BootstrapVue 包含自訂 SCSS/CSS，可加入對自訂開關調整大小的支援。

非自訂核取方塊輸入（純文字）

透過設定 plain prop，讓 <b-form-checkbox-group> 或 <b-form-checkbox> 呈現瀏覽器原生核取方塊輸入。

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

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

<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
        options: [
          { text: 'Orange', value: 'orange' },
          { text: 'Apple', value: 'apple' },
          { text: 'Pineapple', value: 'pineapple' },
          { text: 'Grape', value: 'grape' }
        ]
      }
    }
  }
</script>

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

注意：設定 button 或 buttons 時，plain prop 不會產生作用。

內容相關狀態

Bootstrap 包含許多表單控制項的 valid 與 invalid 狀態驗證樣式。

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

  • false（表示無效狀態）非常適合用於阻斷或必填欄位。為了提交表單，使用者必須正確填寫此欄位。
  • true（表示有效狀態）非常適合用於表單中各欄位進行驗證的情況，且想鼓勵使用者完成剩餘欄位。
  • null 不顯示驗證狀態（既非有效亦非無效）

若要在 <b-form-checkbox> 上套用其中一個內容相關狀態圖示，請設定 state prop 為 false（無效）、true（有效），或 null（無驗證狀態）。

注意：在按鈕模式下不支援內容相關狀態。

內容相關狀態與驗證範例

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

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

<!-- form-checkbox-validation.vue -->

必填限制

當使用個別的 <b-form-checkbox> 元件（非在 <b-form-checkbox-group> 中），而且你想要在表單中將核取方塊設為 required，為了使必填約束生效，你必須在每個 <b-form-checkbox> 中提供一個 name。與同一個 v-model 連結的所有 <b-form-checkbox> 元件必須有相同的名稱 name。

為了讓輔助技術（例如螢幕朗讀程式和僅使用鍵盤的使用者）知道哪個核取方塊屬於同一個表單變數，name 是必要的（名稱也會自動啟用瀏覽器的原生鍵盤導覽），因此，required 僅在設定 name 後才會生效。如果未在群組中提供，<b-form-checkbox-group> 會自動產生一個唯一的輸入名稱。

自動聚焦

當 autofocus 屬性設定在 <b-form-checkbox> 時，輸入會在插入到文件（例如掛載）或在 Vue <keep-alive> 元件內重新啟用時，自動聚焦。請注意，此屬性並未設定輸入的 autofocus 屬性，也無法知道輸入何時變成可見。

不確定（三態）支援

通暢情況下，核取方塊輸入只有兩種狀態：選取或未選取。它們可以有任一值，但它們要么提交該值（選取），要么不提交（未選取），連同表單提交（儘管 BootstrapVue 允許單一核取方塊在未選取狀態下的值）。

視覺上，核取方塊實際有三個狀態：選取、未選取或不確定。

不確定的狀態是僅有視覺提示。當作為一個值時，核取方塊仍然是選取或未選取。這表示視覺不確定狀態遮蓋了核取方塊實際的值，因此這最好在你的使用者介面中表達清楚！

<b-form-checkbox>支援透過 indeterminate 屬性設定此視覺不確定狀態（預設為 false）。如果按核取方塊，會清除其不確定狀態。indeterminate 屬性可以透過將 indeterminate 屬性與 .sync 修飾符同綁來，與核取方塊的狀態同步。

請注意：不確定狀態的樣式不支援按鈕或開關模式，也不支援在 <b-form-checkbox-group>（多個核取方塊）中。

單一的不確定核取方塊

<template>
  <div>
    <b-form-checkbox v-model="checked" :indeterminate.sync="indeterminate">
      Click me to see what happens
    </b-form-checkbox>

    <div class="mt-3">
      Checked: <strong>{{ checked }}</strong><br>
      Indeterminate: <strong>{{ indeterminate }}</strong>
    </div>

    <b-button @click="toggleIndeterminate">Toggle Indeterminate State</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checked: true,
        indeterminate: true
      }
    },
    methods: {
      toggleIndeterminate() {
        this.indeterminate = !this.indeterminate
      }
    }
  }
</script>

<!-- b-form-checkbox-indeterminate.vue -->

不確定核取方塊的用例範例

<template>
  <div>
    <b-form-group>
      <template #label>
        <b>Choose your flavours:</b><br>
        <b-form-checkbox
          v-model="allSelected"
          :indeterminate="indeterminate"
          aria-describedby="flavours"
          aria-controls="flavours"
          @change="toggleAll"
        >
          {{ allSelected ? 'Un-select All' : 'Select All' }}
        </b-form-checkbox>
      </template>

      <template v-slot="{ ariaDescribedby }">
        <b-form-checkbox-group
          id="flavors"
          v-model="selected"
          :options="flavours"
          :aria-describedby="ariaDescribedby"
          name="flavors"
          class="ml-4"
          aria-label="Individual flavours"
          stacked
        ></b-form-checkbox-group>
      </template>
    </b-form-group>

    <div>
      Selected: <strong>{{ selected }}</strong><br>
      All Selected: <strong>{{ allSelected }}</strong><br>
      Indeterminate: <strong>{{ indeterminate }}</strong>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        flavours: ['Orange', 'Grape', 'Apple', 'Lime', 'Very Berry'],
        selected: [],
        allSelected: false,
        indeterminate: false
      }
    },
    methods: {
      toggleAll(checked) {
        this.selected = checked ? this.flavours.slice() : []
      }
    },
    watch: {
      selected(newValue, oldValue) {
        // Handle changes in individual flavour checkboxes
        if (newValue.length === 0) {
          this.indeterminate = false
          this.allSelected = false
        } else if (newValue.length === this.flavours.length) {
          this.indeterminate = false
          this.allSelected = true
        } else {
          this.indeterminate = true
          this.allSelected = false
        }
      }
    }
  }
</script>

<!-- b-form-checkbox-indeterminate-multiple.vue -->

請注意：不確定狀態不支援按鈕模式，也不支援多個核取方塊模式。另外，請注意純文字核取方塊（例如屬性 plain）也在 Windows/Linux/Mac/Android 上支援不確定狀態，但 iOS 上不支援。

不確定狀態和易讀性

並非所有螢幕朗讀程式都會將不確定狀態傳達給螢幕朗讀程式使用者。因此，如果你的應用程式中的不確定狀態具有特殊脈絡意義，建議針對使用者提供某種文字形式的回饋（可能是透過 .sr-only 類別）

組件參考

<b-form-checkbox-group>

查看

組件別名

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

  • <b-checkbox-group>
  • <b-check-group>

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

屬性

所有屬性的預設值都可 全域設定。

屬性
(按一下以升冪排序)
類型
(按一下以升冪排序)
預設值
說明
aria-invalid
布林 或 字串false在包裝元素上設定 'aria-invalid' 屬性的值。若未提供，「state」屬性將控制該屬性
autofocus
布林false設定為 `true` 時，會嘗試在控制項掛載或在維持存活的情況下重新啟動時，將控制項自動設為焦點。不會在控制項上設定 `autofocus` 屬性
button-variant
字串指定要套用到按鈕樣式核取方塊的 Bootstrap 內容情境色彩主題變異
buttons
布林false設定後，在這個群組中，以按鈕樣式呈現核取方塊
checked
v-model 		陣列[]群組中已核取核取方塊的目前值。當有多個核取方塊時，必須是陣列
disabled
布林false設定為 `true` 時，停用組件的功能，並置於停用狀態
disabled-field
字串'disabled'`options` 陣列中的欄位名稱，應使用於停用狀態
form
字串表單的 ID，其中包含表單控制項。在控制項上設定 `form` 屬性
html-field
請小心使用 		字串'html'`options` 陣列中的欄位名稱，應使用於 HTML 標籤，而不是文字欄位
id
字串用於設定顯示內容的 `id` 屬性，並用作在需要時產生任何額外元素 ID 的基礎
name
字串設定表單控制項上 `name` 屬性的值
options
陣列 或 物件[]要在組件中呈現的項目陣列
plain
布林false以純文字模式呈現表單控制項，而不是自訂樣式模式
required
布林false將 `required` 屬性新增至表單控制項
size
字串設定組件外觀的大小。「sm」、「md」（預設值）或「lg」
stacked
布林false設定後，以堆疊模式呈現核取方塊群組
state
布林null控制組件的驗證狀態外觀。`true`表示有效，`false`表示無效，`null`表示沒有驗證狀態
switches
布林false設定後，使用開關樣式呈現群組中的核取方塊
text-field
字串'text'`options` 陣列中的欄位名稱，應使用於文字標籤
validated
布林false設定後，會把 Bootstrap 的 class 'was-validated' 加到群組 wrapper
value-field
字串'value'用在 `options` 陣列中的欄位名稱，應作為數值的用途

注意：支援 HTML 字串的屬性 (*-html) 在傳遞原始使用者提供值時容易受到 跨網站指令碼 (XSS) 攻擊 。你必須先適當 清除 使用者的輸入！

v-model

屬性
事件
checkedinput

插槽

名稱
說明
預設值 內容（表單核取方塊）要放入表單核取方塊群組
第一個 插槽，用於安置 b-form-checks，讓它們顯示在由 options 屬性生成的核取方塊前面

事件

事件
參數
說明
變更
  1. checked - 核取方塊的值。值將是陣列
因為使用者互動，而變更選取值時發出
input
  1. checked - 核取方塊的值。值將是陣列
核取值變更時發出

<b-form-checkbox>

查看

元件別名

<b-form-checkbox> 也能透過下列別名使用

  • <b-checkbox>
  • <b-check>

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

屬性

所有屬性的預設值都可 全域設定。

屬性
(按一下以升冪排序)
類型
(按一下以升冪排序)
預設值
說明
aria-label
字串設定呈現元素上 `aria-label` 屬性的值
aria-labelledby
字串提供此元件標籤的元素 ID。做為 `aria-labelledby` 屬性的值
autofocus
布林false設定為 `true` 時，會嘗試在控制項掛載或在維持存活的情況下重新啟動時，將控制項自動設為焦點。不會在控制項上設定 `autofocus` 屬性
button
布林false設定後，會以按鈕的外觀呈現核取方塊
button-variant
字串在 'button' 模式時，套用 Bootstrap 的主題色彩之一
checked
v-model 		任意null核取方塊的目前值。當有多個核取方塊繫結到同一個 v-model 時，這個值必須是陣列
disabled
布林false設定為 `true` 時，停用組件的功能，並置於停用狀態
form
字串表單的 ID，其中包含表單控制項。在控制項上設定 `form` 屬性
id
字串用於設定顯示內容的 `id` 屬性，並用作在需要時產生任何額外元素 ID 的基礎
indeterminate
布林false以不確定的狀態呈現核取方塊。能透過 .sync 修飾子同步化
inline
布林false設定後，會以內嵌元素呈現核取方塊（而非 100% 寬度區塊）
name
字串設定表單控制項上 `name` 屬性的值
plain
布林false以純文字模式呈現表單控制項，而不是自訂樣式模式
required
布林false將 `required` 屬性新增至表單控制項
size
字串設定組件外觀的大小。「sm」、「md」（預設值）或「lg」
state
布林null控制組件的驗證狀態外觀。`true`表示有效，`false`表示無效，`null`表示沒有驗證狀態
switch
布林false設定後，會以開關的外觀呈現核取方塊
unchecked-value
任意false當此核取方塊未勾選時，會傳回的值。請注意，當多個核取方塊繫結到同一個 v-model 陣列時，此值不適用
value
任意true當此核取方塊已勾選時，會傳回的值

v-model

屬性
事件
checkedinput

插槽

名稱
說明
預設值 內容要放入表單核取方塊

事件

事件
參數
說明
變更
  1. checked - 核取方塊的值。當繫結多個核取方塊時，值為陣列
因為使用者互動，而變更選取值時發出
input
  1. checked - 核取方塊的值。當繫結多個核取方塊時，值為陣列
當選取的值變更時會觸發

匯入個人元件

你可以透過下列命名匯出，將個人元件匯入你的專案

元件
命名匯出
匯入路徑
<b-form-checkbox-group>BFormCheckboxGroupbootstrap-vue
<b-form-checkbox>BFormCheckboxbootstrap-vue

範例

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

作為 Vue.js 外掛匯入

此外掛包含以上所列的個人元件. 外掛也包含任何元件別名。

命名匯出
匯入路徑
FormCheckboxPluginbootstrap-vue

範例

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