フォームグループ

<template>
  <div>
    <b-form-group
      id="fieldset-1"
      description="Let us know your name."
      label="Enter your name"
      label-for="input-1"
      valid-feedback="Thank you!"
      :invalid-feedback="invalidFeedback"
      :state="state"
    >
      <b-form-input id="input-1" v-model="name" :state="state" trim></b-form-input>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    computed: {
      state() {
        return this.name.length >= 4
      },
      invalidFeedback() {
        if (this.name.length > 0) {
          return 'Enter at least 4 characters.'
        }
        return 'Please enter something.'
      }
    },
    data() {
      return {
        name: ''
      }
    }
  }
</script>

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

ラベル

プロパティlabelを使用して、生成された<legend>または<label>要素のコンテンツを設定するか、名前付きスロットlabelを使用します。プロパティlabel-sr-onlyを設定することで、ラベルテキストを視覚的に非表示にしながら、スクリーンリーダーで利用できるようにすることができます。

<b-form-group>は、label-forプロパティが設定されていない場合、<legend>付きの<fieldset>をレンダリングします。label-forプロパティに入力IDが提供されている場合、<label>付きの<div>がレンダリングされます。

label-forプロパティにinput id値を指定した場合（idは<b-form-group>内に含まれるinputに存在する必要があります）、<legend>要素の代わりに<label>要素がレンダリングされ、for属性が指定されたidに設定されます。idを指定する場合は、#を先頭に付加しないでください。label-forプロパティは、<b-form-group>コンポーネント内に単一のフォーム入力がある場合にのみ使用する必要があります。<b-form-radio-group>、<b-form-checkbox-group>、<b-form-radio>、<b-form-checkbox>または<b-form-file>コンポーネントを使用する場合（または同じフォームグループに複数の入力を配置する場合）は、これらの入力に統合されたラベル要素が含まれており、<legend>要素の方が適しているため、label-forプロパティを設定しないでください。

レスポンシブなパディングやテキスト配置ユーティリティクラスなど、label-classプロパティを介して追加のクラスをラベルに適用することもできます。label-classプロパティは、文字列または文字列の配列を受け入れます。

水平レイアウト

デフォルトでは、ラベルは入力要素の上に表示されますが、オプションで、さまざまな標準のBootstrapブレークポイントで水平（入力の左側のラベル）でレンダリングできます。

プロパティlabel-colsおよびlabel-cols-{breakpoint}を使用すると、ラベルが行で占める列数を指定できます。入力は残りの行幅を埋めます。値は0より大きい数値である必要があります。または、プロパティをtrueに設定して、ラベルと入力がレンダリングされた行の幅の半分をそれぞれ占めるようにするか（列数が奇数のカスタムBootstrapがある場合に便利）、値を'auto'に設定して、ラベルが必要な幅のみを占有するようにします。

BootstrapVue v2.21.0以降、content-colsおよびcontent-cols-{breakpoint}プロパティを介して、コンテンツが行で占める列数を指定することもできます。

両方を使用する場合、label-colsおよびcontent-colsプロパティを使用する場合、列の合計数が12を超えないようにしてください。

詳細については、レイアウトとグリッドシステムのドキュメントを参照してください。

<div>
  <div>
    <b-form-group
      id="fieldset-horizontal"
      label-cols-sm="4"
      label-cols-lg="3"
      content-cols-sm
      content-cols-lg="7"
      description="Let us know your name."
      label="Enter your name"
      label-for="input-horizontal"
    >
      <b-form-input id="input-horizontal"></b-form-input>
    </b-form-group>
  </div>
</div>

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

ラベルの列を'auto'に設定する機能は、BootstrapVueバージョンv2.1.0で追加されました。

ラベルサイズ

オプションのlabel-sizeプロパティを使用して、ラベルのテキストサイズをフォーム入力のサイズに合わせることができます。値は、それぞれ小さいラベルまたは大きいラベルの場合、'sm'または'lg'にすることができます。サイズは、水平および非水平のフォームグループの両方で機能します。

<div>
  <b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="Small" label-for="input-sm">
    <b-form-input id="input-sm" size="sm"></b-form-input>
  </b-form-group>

  <b-form-group label-cols="4" label-cols-lg="2" label="Default" label-for="input-default">
    <b-form-input id="input-default"></b-form-input>
  </b-form-group>

  <b-form-group label-cols="4" label-cols-lg="2" label-size="lg" label="Large" label-for="input-lg">
    <b-form-input id="input-lg" size="lg"></b-form-input>
  </b-form-group>
</div>

<!-- b-form-group-label-size.vue -->

ラベルテキストの配置

ラベルテキストは、プロパティlabel-text-alignおよび/またはlabel-align-{breakpoint}を介してそれぞれの値を設定することにより、オプションでleft、centerまたはrightに配置することもできます。

label-sr-onlyプロパティが設定されている場合、配置は効果がありません。

説明

descriptionプロパティを設定するか、名前付きスロットdescriptionを使用することで、.text-mutedクラスで常に表示されるオプションの説明テキスト。説明テキストは、<b-form-text>フォームサブコンポーネントを使用してレンダリングされます。

ネストされたフォームグループ

高度なフォームレイアウトと関連するフォームコントロールのセマンティックグループ化を作成するために、<b-form-group>コンポーネントを自由にネストしてください

<div>
  <b-card bg-variant="light">
    <b-form-group
      label-cols-lg="3"
      label="Shipping Address"
      label-size="lg"
      label-class="font-weight-bold pt-0"
      class="mb-0"
    >
      <b-form-group
        label="Street:"
        label-for="nested-street"
        label-cols-sm="3"
        label-align-sm="right"
      >
        <b-form-input id="nested-street"></b-form-input>
      </b-form-group>

      <b-form-group
        label="City:"
        label-for="nested-city"
        label-cols-sm="3"
        label-align-sm="right"
      >
        <b-form-input id="nested-city"></b-form-input>
      </b-form-group>

      <b-form-group
        label="State:"
        label-for="nested-state"
        label-cols-sm="3"
        label-align-sm="right"
      >
        <b-form-input id="nested-state"></b-form-input>
      </b-form-group>

      <b-form-group
        label="Country:"
        label-for="nested-country"
        label-cols-sm="3"
        label-align-sm="right"
      >
        <b-form-input id="nested-country"></b-form-input>
      </b-form-group>

      <b-form-group
        label="Ship via:"
        label-cols-sm="3"
        label-align-sm="right"
        class="mb-0"
        v-slot="{ ariaDescribedby }"
      >
        <b-form-radio-group
          class="pt-2"
          :options="['Air', 'Courier', 'Mail']"
          :aria-describedby="ariaDescribedby"
        ></b-form-radio-group>
      </b-form-group>
    </b-form-group>
  </b-card>
</div>

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

無効なフォームグループ

disabledプロパティを設定すると、レンダリングされた<fieldset>が無効になり、ほとんどのブラウザーでは、フィールドセット内に含まれるすべての入力要素が無効になります。

disabledは、label-forが設定されている場合（<fieldset>要素がレンダリングされないため）、効果がありません。

検証状態フィードバック

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

一般的に、特定の種類のフィードバックに特定の状態を使用することをお勧めします。

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

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

Bootstrap v4 では、:invalid または :valid 入力の兄弟 CSS セレクターを使用して、フィードバックテキストを表示します。一部のフォームコントロール（チェックボックス、ラジオボタン、ファイル入力、または入力グループ内の入力など）は、フィードバックテキストを入力の兄弟ではなくする追加のマークアップでラップされているため、フィードバックが表示されません。このような状況では、<b-form-group> と入力の両方で有効性 state を設定する必要があります。

親の <b-form> コンポーネントに novalidate プロパティが設定されていない（または false に設定されている）場合、および validated プロパティが設定されている場合（および入力が required などのネイティブブラウザの検証制約に失敗または合格した場合）、フィードバックが表示されます。検証方法の詳細については、Bootstrap v4 の フォームコンポーネントドキュメントを参照してください。

コンテキスト invalid 状態を設定する場合は、支援技術を使用しているユーザーを支援するために、常に invalid-feedback プロパティ（またはスロット）を介してコンテンツを提供する必要があります。

無効なフィードバック

プロパティ invalid-feedback を設定するか、名前付きスロット invalid-feedback を使用して、テキストによる状態フィードバック（HTMLサポート）を提供するオプションの無効状態フィードバックテキストを表示します。

無効なフィードバックは、<b-form-invalid-feedback> フォームサブコンポーネントを使用してレンダリングされます。

有効なフィードバック

プロパティ valid-feedback を設定するか、名前付きスロット valid-feedback を使用して、テキストによる状態フィードバック（HTMLサポート）を提供するオプションの有効状態フィードバックテキストを表示します。

有効なフィードバックは、<b-form-valid-feedback> フォームサブコンポーネントを使用してレンダリングされます。

フィードバックのスタイル

デフォルトでは、表示されている場合、フィードバック（有効または無効）はテキストのブロックとして表示されます。プロパティ tooltip を true に設定することで、表示されている場合に静的なツールチップとして表示されるようにフィードバックを変更できます。

フィードバックの制限事項

注： <b-input-group>、<b-form-file>、<b-form-radio-group>、<b-form-radio>、<b-form-checkbox-group>、または <b-form-checkbox> を <b-form-group> 内で使用する場合、input 単独で無効（または有効）な state を設定しても、無効（または有効）なフィードバックは表示されません（新しい Bootstrap v4 の検証 CSS の制限による）。これを回避するには、<b-form-group> でも無効/有効な state を設定する必要があります。上記のフォームコントロールのいずれかを使用している場合、ネイティブブラウザの検証では無効なフィードバックは表示されません。

アクセシビリティ

デフォルトでは、label-for 値が指定されていない場合、<b-form-group> は、HTML <fieldset> 要素内に入力コントロールをレンダリングし、ラベルコンテンツをフィールドセットの <legend> 要素内に配置します。このマークアップの性質上、凡例の内容は、含まれている入力コントロールに自動的に関連付けられます。

<b-form-group> に入力が1つしかない場合は、入力要素に一意の id プロパティを提供し、label-for プロパティをこのIDに設定することを強くお勧めします。

複数のフォームコントロールが <b-form-group> 内に配置されている場合（つまり、一連のラジオまたはチェックボックス入力、または一連の関連する入力）、ラベルは単一の入力にのみ関連付けることができるため、label-for プロパティを設定しないでください。入力のグループを記述する <fieldset> + <legend> を生成するデフォルトのレンダリングマークアップを使用するのが最適です。

複数のフォームコントロールを <b-form-group> 内に配置する場合（および <b-form-group> コンポーネントをネストしていない場合）、各コントロールに独自に関連付けられた <label> を与えることをお勧めします（.sr-only クラスを使用して視覚的に非表示にできます）。ラベルの for 属性を関連付けられた入力コントロールの id に設定します。または、<label> を使用する代わりに、各入力コントロールに aria-label 属性を設定できます。<b-form-radio> および <b-form-checkbox> （またはグループバージョン）の場合、これらのタイプの入力のレンダリングマークアップにはすでに <label> 要素が含まれているため、個別のラベルを設定する必要はありません。

<b-form-group> に label-for プロパティが設定されている場合、aria-describedby 属性は入力に自動的に割り当てられます。フォームグループに複数のフォームコントロールがある場合は、必要に応じてスコープされた default スロットの ariaDescribedby プロパティ値を使用して、各コントロールに属性を自分で設定してください。