guide/quickstart/forms.md

4 [bootstrap-vue form component](https://bootstrap-vue.org/docs/components/form)
5 and validated with the [Vuelidate](https://vuelidate.js.org/#sub-installation)
10 When creating a new form, use the `<b-form>`
11 [form component](https://bootstrap-vue.org/docs/components/form). Use the
17 The `<b-form-group>`
18 [form group component](https://bootstrap-vue.org/docs/components/form-group)
23 - [Form checkbox](https://bootstrap-vue.org/docs/components/form-checkbox)
24 - [Form input](https://bootstrap-vue.org/docs/components/form-input)
25 - [Form radio](https://bootstrap-vue.org/docs/components/form-radio)
26 - [Form select](https://bootstrap-vue.org/docs/components/form-select)
27 - [Form file custom component](/guide/components/file-upload)
29 When helper text is provided, use the `<b-form-text>` component and
30 `aria-describedby` on the form group component the helper text describes.
34 For custom form validation messages, disable browser native HTML5 validation by
35 setting the `novalidate` prop on `<b-form>`. Use Vuelidate to check the form
37 `<b-form-invalid-feedback>` component.
41 `required`, `requiredIf`, etc. The use of built-in validators is preferred.
49   <b-form novalidate @submit.prevent="handleSubmit">
50     <b-form-group
52       label-for="form-input-id"
54       <b-form-text id="form-input-helper-text">
56       </b-form-text>
57       <b-form-input
58         id="form-input-id"
59         v-model="form.input"
61         aria-describedby="form-input-helper-text"
65       <b-form-invalid-feedback role="alert">
66         <div v-if="!$v.form.input.required">
69       </b-form-invalid-feedback>
70     </b-form-group>
71     <b-button variant="primary" type="submit" class="mb-3">
73     </b-button>
74   </b-form>