Form
BootstrapVueNext form component and helper components that optionally support inline form styles and validation states. Pair them up with other BootstrapVueNext form control components for an easy customized, and responsive, layout with a consistent look and feel.
Introduction to forms and controls
Be sure to use an appropriate type
on all inputs (e.g., email
for email address or number
for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
Here is a quick example to demonstrate BootstrapVueNext's form styles. Keep reading for documentation on supported components, form layout, and more.
{ "email": "", "name": "", "food": null, "checked": [] }
<template>
<BForm @submit="onSubmit" @reset="onReset" v-if="show">
<BFormGroup
id="input-group-1"
label="Email address:"
label-for="input-1"
description="We'll never share your email with anyone else."
>
<BFormInput
id="input-1"
v-model="form.email"
type="email"
placeholder="Enter email"
required
/>
</BFormGroup>
<BFormGroup id="input-group-2" label="Your Name:" label-for="input-2">
<BFormInput id="input-2" v-model="form.name" placeholder="Enter name" required />
</BFormGroup>
<BFormGroup id="input-group-3" label="Food:" label-for="input-3">
<BFormSelect id="input-3" v-model="form.food" :options="foods" required />
</BFormGroup>
<BFormGroup id="input-group-4">
<BFormCheckboxGroup v-model="form.checked" id="checkboxes-4">
<BFormCheckbox value="me">Check me out</BFormCheckbox>
<BFormCheckbox value="that">Check that out</BFormCheckbox>
</BFormCheckboxGroup>
</BFormGroup>
<BButton type="submit" variant="primary">Submit</BButton>
<BButton type="reset" variant="danger">Reset</BButton>
</BForm>
<BCard class="mt-3" header="Form Data Result">
<pre class="m-0">{{ form }}</pre>
</BCard>
</template>
<script setup lang="ts">
const foods = [{text: 'Select One', value: null}, 'Carrots', 'Beans', 'Tomatoes', 'Corn']
const form = reactive({
email: '',
name: '',
food: null,
checked: [],
})
const show = ref(true)
const onSubmit = (event) => {
event.preventDefault()
alert(JSON.stringify(form))
}
const onReset = (event) => {
event.preventDefault()
// Reset our form values
form.email = ''
form.name = ''
form.food = null
form.checked = []
// Trick to reset/clear native browser form validation state
show.value = false
nextTick(() => {
show.value = true
})
}
</script>
Inline form
Bootstrap 5 has dropped form-specific layout classes for the grid system. See this.
To create horizontal forms with the grid by add the .row
class to form groups and use the .col-_-_
classes to specify the width of your labels and controls. Be sure to add .col-form-label
to your <label>
s as well, so they’re vertically centered with their associated form controls.
You may need to manually address the width and alignment of individual form controls with spacing utilities (as shown below). Lastly, be sure to always include a <label>
with each form control, even if you need to hide it from non-screenreader visitors with class .visually-hidden
.
<BForm>
<div class="row">
<label class="col-form-label visually-hidden" for="inline-form-input-name">Name</label>
<div class="col-lg-3">
<BFormInput
id="inline-form-input-name"
class="mb-2 me-sm-2 mb-sm-0"
placeholder="Jane Doe"
/>
</div>
<label class="col-form-label visually-hidden" for="inline-form-input-username"
>Username</label
>
<div class="col-lg-3">
<BInputGroup prepend="@" class="col-lg-4 mb-2 me-sm-2 mb-sm-0">
<BFormInput id="inline-form-input-username" placeholder="Username" />
</BInputGroup>
</div>
<BFormCheckbox class="col-form-label col-lg-2 mb-2 me-sm-2 mb-sm-0"
>Remember me</BFormCheckbox
>
<div class="col-lg-1">
<BButton variant="primary">Save</BButton>
</div>
</div>
</BForm>
Custom form controls and selects are also supported.
<BForm>
<div class="row">
<label class="col-form-label col-lg-2 me-sm-2" for="inline-form-custom-select-pref"
>Preference</label
>
<div class="col-lg-2">
<BFormSelect
id="inline-form-custom-select-pref"
class="mb-2 me-sm-2 mb-sm-0"
:options="[{ text: 'Choose...', value: null }, 'One', 'Two', 'Three']"
:value="null"
/>
</div>
<BFormCheckbox class="col-form-label col-lg-3 mb-2 me-sm-2 mb-sm-0"
>Remember my preference</BFormCheckbox
>
<div class="col-lg-2 col-form-label">
<BButton variant="primary">Save</BButton>
</div>
</div>
</BForm>
Alternatives to hidden labels
Assistive technologies such as screen readers will have trouble with your forms if you do not include a label for every input. For these inline forms, you can hide the labels using the .sr-only
class. There are further alternative methods of providing a label for assistive technologies, such as the aria-label
, aria-labelledby
or title
attributes. If none of these are present, assistive technologies may resort to using the placeholder
attribute, if present, but note that use of placeholder
as a replacement for other labelling methods is not advised.
Related form control and layout components
See also:
BFormInput
Textual and text-like inputsBFormTextarea
Text area inputsBFormSelect
Select inputBFormRadio
Radio InputsBFormCheckbox
Checkbox InputsBFormFile
File InputBFormDatepicker
Date picker inputBFormSpinbutton
Numerical range spinbutton inputBFormTags
Customizable tag input~~BFormTimepicker
Time picker custom form inputBFormRating
Star rating custom form input and displayBButton
ButtonsBFormGroup
Form Input wrapper to generate form-groups that support labels, help text and feedbackBInputGroup
Form Inputs with add-onsBFormRow
Create grid rows and columns with tighter margins (available via the Layout and grid components)
Form helper components
The following helper components are available with the Form
plugin:
BFormText
Help text blocks for inputsBFormInvalidFeedback
Invalid feedback text blocks for inputinvalid
statesBFormValidFeedback
Valid feedback text blocks for inputvalid
statesBFormDatalist
Easily create a<datalist>
for use withBFormInput
or plain<input>
Form text helper
Display a block of help text below an input with the BFormText
helper component. text is displayed with a muted color and slightly smaller font-size.
Tip: Help text should be explicitly associated with the form control it relates to using the aria-describedby
attribute. This will ensure that assistive technologies, such as screen readers, will announce this help text when the user focuses or enters the control.
<BForm @submit.stop.prevent>
<label for="text-password">Password</label>
<BFormInput
type="password"
id="text-password"
aria-describedby="password-help-block"
/>
<BFormText id="password-help-block">
Your password must be 8-20 characters long, contain letters and numbers, and must not
contain spaces, special characters, or emoji.
</BFormText>
</BForm>
Feedback helpers
The BFormValidFeedback
and BFormInvalidFeedback
helper components will display feedback (based on input state) as a block of colored text. They rely on being placed after an input (sibling) and will show based on the browser native validation state of the input. To force them to show, set the prop force-show
to true
, or bind the controls state
to the state
prop of the feedback helper, or set the was-validated
class on a parent element (such as a form). See the Validation section below for additional details.
Use the optional Boolean prop tooltip
to change the display from a block to a static tooltip style. The feedback will typically appear below the form control. When this mode is enabled, it is important that the parent container have a position: relative:
css style (or position-relative
class). Note that tooltip style feedback may, since its positioning is static, obscure other inputs, labels, etc.
Note: Some form controls, such as BFormRadio
, BFormCheckbox
, and have wrapper elements which will prevent the feedback text from automatically showing (as the feedback component is not a direct sibling of the form control's input). Use the feedback component's BFormFile
state
prop (bound to the state of the form control) or the force-show
prop to display the feedback.
<template>
<BForm @submit.stop.prevent>
<label for="feedback-user">User Id</label>
<BFormInput v-model="userId" :state="validation" id="feedback-user" />
<BFormInvalidFeedback :state="validation">
Your user Id must be 5-12 characters long.
</BFormInvalidFeedback>
<BFormValidFeedback :state="validation"> Looks Good. </BFormValidFeedback>
</BForm>
</template>
<script setup lang="ts">
const userId = ref('')
const validation = computed(() => userId.value.length > 4 && userId.value.length < 13)
</script>
Validation
Disable browser native HTML5 validation by setting the novalidate
prop to true on BForm
.
Set the validated
prop, on BForm
, to true
to add the Bootstrap v5 .was-validated
class to the form to trigger validation states.
All form controls support a state
prop, which can be used to set the form control into one of three contextual states:
false
(denotes invalid state) is great for when there is a blocking or required field. A user must fill in this field properly to submit the formtrue
(denotes valid state) is ideal for situations when you have per-field validation throughout a form and want to encourage a user through the rest of the fieldsnull
Displays no validation state (neither valid nor invalid)
Refer to the Bootstrap v5 Form Validation Documentation for details on the Bootstrap v5 validation states.
Component Reference
<BForm>
Prop | Type | Default | Description |
---|---|---|---|
floating | boolean | false | |
id | string | undefined | |
novalidate | boolean | false | |
validated | boolean | false |
Event | Args | Description |
---|---|---|
submit | submit : Event |
Name | Scope | Description |
---|---|---|
default |
<BFormFloatingLabel>
Prop | Type | Default | Description |
---|---|---|---|
label | string | undefined | |
labelFor | string | undefined | |
text | string | undefined |
Name | Scope | Description |
---|---|---|
default | ||
label |
<BFormInvalidFeedback>
Prop | Type | Default | Description |
---|---|---|---|
ariaLive | string | undefined | |
forceShow | boolean | false | |
id | string | undefined | |
role | string | undefined | |
state | boolean | null | |
tag | string | 'div' | |
text | string | undefined | |
tooltip | boolean | false |
Name | Scope | Description |
---|---|---|
default |
<BFormRow>
Prop | Type | Default | Description |
---|---|---|---|
tag | string | 'div' |
Name | Scope | Description |
---|---|---|
default |
<BFormText>
Prop | Type | Default | Description |
---|---|---|---|
id | string | undefined | |
inline | boolean | false | |
tag | string | 'small' | |
text | string | undefined | |
textVariant | TextColorVariant | null | 'body-secondary' |
Name | Scope | Description |
---|---|---|
default |
<BFormValidFeedback>
Prop | Type | Default | Description |
---|---|---|---|
ariaLive | string | undefined | |
forceShow | boolean | false | |
id | string | undefined | |
role | string | undefined | |
state | boolean | null | |
tag | string | 'div' | |
text | string | undefined | |
tooltip | boolean | false |
Name | Scope | Description |
---|---|---|
default |