Logo
Hi, Sean S

Form group 

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

Horizontal layout 

<div>
   <b-form-group
     id="fieldset-horizontal"
     label-cols-sm="4"
     label-cols-lg="3"
     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>

By default, the label appears above the input element(s), but you may optionally render horizontal (label to the left of the input) at the various standard Bootstrap breakpoints.

Let us know your name.

Label size 

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

You can control the label text size match the size of your form input(s) via the optional label-size prop. Values can be 'sm' or 'lg' for small or large label, respectively. Sizes work for both horizontal and non-horizontal form groups.

Nested form groups 

<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-cols-sm="3"
        label="Street:"
        label-align-sm="right"
        label-for="nested-street"
      >
        <b-form-input id="nested-street"></b-form-input>
      </b-form-group>

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

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

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

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

Feel free to nest <b-form-group> components to produce advanced form layouts and semantic grouping of related form controls:

Shipping Address
Ship via: