BootstrapVue — Form Group

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to group inputs with form groups.

Form Group

Form groups let us add some structure to forms.

The b-form-group is a form group.

We can control the placing of legends and labels and place validation feedback text.

For instance, we can use it by writing:

<template>
  <div id="app">
    <b-form-group
      description="Your name."
      label="Your name"
      label-for="input-1"
      :invalid-feedback="invalidFeedback"
      :valid-feedback="validFeedback"
      :state="state"
    >
      <b-form-input trim id="input-1" v-model="name" :state="state"></b-form-input>
    </b-form-group>
  </div>
</template>

<script>
export default {
  computed: {
    state() {
      return this.name.length > 0;
    },
    invalidFeedback() {
      if (this.name.length > 0) {
        return "";
      } else {
        return "Please enter a name";
      }
    },
    validFeedback() {
      return this.state ? "Looks good" : "";
    }
  },
  data() {
    return {
      name: ""
    };
  }
};
</script>

We use the b-form-group component.

It has the feedback for form validation.

And it also includes the form input label.

The description prop lets us set the descriptions text displayed below the form input.

label has the labvel for the form input.

invalid-feedback is set to a function that returns the feedback text when the input value is invalid.

valid-feedback is set to a function that returns the feedback text when the input value is valid.

state is set to the validation state.

Then when we enter something valid, like text with 1 or more characters, it shows the valid text in green.

Otherwise, it shows the invalid value text in red.

The input box also has the corresponding change in color because we set the state prop for that.

Horizontal Layout

We can add the label-cols-sm and label-cols-klg props to change the column width of the labels.

This way, they can be less than the full width of the viewport.

For instance, we can write:

<template>
  <div id="app">
    <b-form-group
      description="Enter your name."
      label="Enter your name"
      label-for="input-horizontal"
      label-cols-sm="4"
      label-cols-lg="3"
    >
      <b-form-input id="input-horizontal"></b-form-input>
    </b-form-group>
  </div>
</template>

<script>
export default {};
</script>

label-cols-sm is the column size for the label when the screen is narrow.

lable-cols-lg is the size for when the screen is wide.

Label Size

The label size can also change.

It can be changed with the label-size prop.

The value can be 'sm' or 'lg' .

For instance, we can write:

<template>
  <div id="app">
    <b-form-group description="Enter your name." label="Enter your name" label-size="sm">
      <b-form-input id="input-horizontal"></b-form-input>
    </b-form-group>
  </div>
</template>

<script>
export default {};
</script>

The code is smaller than the default size with the label-size=”sm” .

Label Text Alignment

We can align the labels in various positions with the label-align prop.

It applies to breakpoints xs and up.

The value can be left , center , or right .

label-align-sm applies to breakpoint sm and up.

label-align-md applies to breakpoint md and up.

label-align-lg applies to breakpoint lg and up.

label-align-xl applies to breakpoint xl and up.

Nested Form Groups

Form groups can be nested.

For example, we can write:

<template>
  <div id="app">
    <b-form-group label-cols-lg="3" label="Person" label-size="lg" class="mb-0">
      <b-form-group
        label-cols-sm="3"
        label="Name:"
        label-align-sm="right"
        label-for="nested-name"
      >
        <b-form-input id="nested-name"></b-form-input>
      </b-form-group>
    </b-form-group>
  </div>
</template>

<script>
export default {};
</script>

We need the b-form-group component.

The label is set for the outer group.

Also, we have the label on the inner form group.

Conclusion

We can create form groups with labels and form validation state rendered by this component.

The sizes of the form elements can be changed.

Also, we can nest form groups.