BootstrapVue — Form Basics

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 create basic forms with BootstrapVue.

Form

BootstrapVue has plenty of components for creating forms our way.

To create a form we can use the b-form , b-form-group , and b-form-input components.

For instance, we can create a simple form by writing:

<template>
  <div id="app">
    <b-form @submit="onSubmit" @reset="onReset">
      <b-form-group id="input-group-1" label="name" label-for="input-1" description="your name">
        <b-form-input id="input-1" v-model="form.name" type="text" required placeholder="name"></b-form-input>
      </b-form-group>
    </b-form>
  </div>
</template>
`
<script>
export default {
  name: "App",
  data() {
    return {
      form: {}
    };
  },
  methods: {
    onSubmit() {},
    onReset() {}
  }
};
</script>

We created a simple form with an input box by using those components.

The b-form-input is a text input box that renders the input element.

v-model binds the inputted value to the model.

It also takes the @submit and @reset handlers to allow us to handle submit and reset events triggered on a form.

Inline Form

We can make a form for input inline by adding the inline prop to b-form .

For instance, we can write:

<template>
  <div id="app">
    <b-form inline>
      <label class="sr-only" for="name">Name</label>
      <b-input id="name" placeholder="name"></b-input>
    </b-form>
  </div>
</template>
`
<script>
export default {
  name: "App"
};
</script>

We just add the inline prop to b-form to make our form inline instead of a block element.

We can add multiple form input elements side by side by writing:

`<template>
  <div id="app">
    <b-form inline>
      <label class="sr-only" for="name">name</label>
      <b-input class="mb-2 mr-sm-2 mb-sm-0" id="name" placeholder="name"></b-input>
`
<label class="sr-only" for="email">email</label>
      <b-input-group prepend="@" class="mb-2 mr-sm-2 mb-sm-0">
        <b-input id="email" placeholder="email"></b-input>
      </b-input-group>
    </b-form>
  </div>
</template>
`
<script>
export default {
  name: "App"
};
</script>

Now we have 2 input boxes side by side.

They’re responsive, so their size will adjust according to the viewport width.

Form Text Helper

We can add a b-form-text element to add an explanation for our input field.

For example, we can write:

<template>
  <div id="app">
    <b-form inline>
      <label for="name">name</label>
      <b-input type="text" id="name"></b-input>
      <b-form-text id="name">
        10 or more characters
      </b-form-text>
    </b-form>
  </div>
</template>
`
<script>
export default {
  name: "App"
};
</script>

We have the b-form-text to add a description below the input box.

Feedback Helpers

BootstrapVue provides us with the b-form-invalid-feedback component to display form validation errors.

It also has the b-form-valid-feedback to display a message if the form input value is valid.

For instance, we can display form validation errors by writing:

<template>
  <div id="app">
    <b-form inline>
      <label for="feedback-user">name</label>
      <b-input v-model="name" :state="validation" id="name"></b-input>
      <b-form-invalid-feedback :state="validation">please enter a name</b-form-invalid-feedback>
    </b-form>
  </div>
</template>
`
<script>
export default {
  name: "App",
  data() {
    return {
      name: ""
    };
  },
  computed: {
    validation() {
      return this.name.length > 0;
    }
  }
};
</script>

We have a b-input component with the b-form-invalid-feedback below it.

The state prop takes an expression that indicates the form value validation state.

The b-form-invalid-feedback also takes the same state prop.

Now if we type something, we see a green border and a checkmark.

If we typed nothing, we see a red border and an exclamation mark with the form validation message.

We just have the validation computed property to return the input validation state.

To add a message to show something when we input something valid, we can write:

<template>
  <div id="app">
    <b-form inline>
      <label for="feedback-user">name</label>
      <b-input v-model="name" :state="validation" id="name"></b-input>
      <b-form-invalid-feedback :state="validation">please enter a name</b-form-invalid-feedback>
      <b-form-valid-feedback :state="validation">good job</b-form-valid-feedback>
    </b-form>
  </div>
</template>
`
<script>
export default {
  name: "App",
  data() {
    return {
      name: ""
    };
  },
  computed: {
    validation() {
      return this.name.length > 0;
    }
  }
};
</script>

We added:

<b-form-valid-feedback :state="validation">good job</b-form-valid-feedback>

to display a message when we entered something to the input box.

Conclusion

BootstrapVue provides us with lots of form components to add input boxes and validation indicators.

It can bind input values to model fields automatically.