Properties
Property | Type | Default Value |
---|---|---|
id | String | |
inline | Boolean | false |
novalidate | Boolean | false |
validated | Boolean | false |
BootstrapVue form component and helper components that optionally support inline form styles and validation states. Pair them up with other BootstrapVue form control components for an easy customized, and responsive, layout with a consistent look and feel.
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's a quick example to demonstrate BootstrapVue's form styles. Keep reading for documentation on supported components, form layout, and more.
<template>
<div>
<b-form @submit="onSubmit" @reset="onReset" v-if="show">
<b-form-group
id="input-group-1"
label="Email address:"
label-for="input-1"
description="We'll never share your email with anyone else."
>
<b-form-input
id="input-1"
v-model="form.email"
type="email"
required
placeholder="Enter email"
></b-form-input>
</b-form-group>
<b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
<b-form-input
id="input-2"
v-model="form.name"
required
placeholder="Enter name"
></b-form-input>
</b-form-group>
<b-form-group id="input-group-3" label="Food:" label-for="input-3">
<b-form-select
id="input-3"
v-model="form.food"
:options="foods"
required
></b-form-select>
</b-form-group>
<b-form-group id="input-group-4">
<b-form-checkbox-group v-model="form.checked" id="checkboxes-4">
<b-form-checkbox value="me">Check me out</b-form-checkbox>
<b-form-checkbox value="that">Check that out</b-form-checkbox>
</b-form-checkbox-group>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</b-form>
<b-card class="mt-3" header="Form Data Result">
<pre class="m-0">{{ form }}</pre>
</b-card>
</div>
</template>
<script>
export default {
data() {
return {
form: {
email: '',
name: '',
food: null,
checked: []
},
foods: [{ text: 'Select One', value: null }, 'Carrots', 'Beans', 'Tomatoes', 'Corn'],
show: true
}
},
methods: {
onSubmit(evt) {
evt.preventDefault()
alert(JSON.stringify(this.form))
},
onReset(evt) {
evt.preventDefault()
// Reset our form values
this.form.email = ''
this.form.name = ''
this.form.food = null
this.form.checked = []
// Trick to reset/clear native browser form validation state
this.show = false
this.$nextTick(() => {
this.show = true
})
}
}
}
</script>
<!-- b-form.vue -->
Use the inline
prop on <b-form>
to display a series of labels, form controls, and buttons on a
single horizontal row. Form controls within inline forms vary slightly from their default states.
display: flex
, collapsing any HTML white space and allowing you to provide
alignment control with spacing and flexbox utilities.width: auto
to override the Bootstrap default width: 100%.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 .sr-only
.
<div>
<b-form inline>
<label class="sr-only" for="inline-form-input-name">Name</label>
<b-input
id="inline-form-input-name"
class="mb-2 mr-sm-2 mb-sm-0"
placeholder="Jane Doe"
></b-input>
<label class="sr-only" for="inline-form-input-username">Username</label>
<b-input-group prepend="@" class="mb-2 mr-sm-2 mb-sm-0">
<b-input id="inline-form-input-username" placeholder="Username"></b-input>
</b-input-group>
<b-form-checkbox class="mb-2 mr-sm-2 mb-sm-0">Remember me</b-form-checkbox>
<b-button variant="primary">Save</b-button>
</b-form>
</div>
<!-- b-form-inline.vue -->
Custom form controls and selects are also supported.
<div>
<b-form inline>
<label class="mr-sm-2" for="inline-form-custom-select-pref">Preference</label>
<b-form-select
class="mb-2 mr-sm-2 mb-sm-0"
:value="null"
:options="{ '1': 'One', '2': 'Two', '3': 'Three' }"
id="inline-form-custom-select-pref"
>
<option slot="first" :value="null">Choose...</option>
</b-form-select>
<b-form-checkbox class="mb-2 mr-sm-2 mb-sm-0">Remember my preference</b-form-checkbox>
<b-button variant="primary">Save</b-button>
</b-form>
</div>
<!-- b-form-inline-custom.vue -->
Note: <b-form-group>
is not supported in inline
forms due to layout conflicts.
Assistive technologies such as screen readers will have trouble with your forms if you don't 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.
See also:
<b-form-input>
Textual and text-like inputs<b-form-textarea>
Text area inputs<b-form-select>
Select input<b-form-radio>
Radio Inputs<b-form-checkbox>
Checkbox Inputs<b-form-file>
File Input<b-button>
Buttons<b-form-group>
Form input wrapper to generate form-groups that
support labels, help text and feedback<b-input-group>
Form inputs with add-ons<b-form-row>
Create grid rows and columns with tighter margins
(available via the Layout and grid components)The following helper components are available with the Form
plugin:
<b-form-text>
Help text blocks for inputs<b-form-invalid-feedback>
Invalid feedback text blocks for input invalid
states<b-form-valid-feedback>
Valid feedback text blocks for input valid
states<b-form-datalist>
Easily create a <datalist>
for use with <b-form-input>
or plain <input>
Display a block of help text below an input with the <b-form-text>
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.
<div>
<b-form @submit.stop.prevent>
<label for="text-password">Password</label>
<b-input type="password" id="text-password" aria-describedby="password-help-block"></b-input>
<b-form-text 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.
</b-form-text>
</b-form>
</div>
<!-- b-form-help-text.vue -->
The <b-form-valid-feedback>
and <b-form-invalid-feedback>
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 it's positioning is static, obscure other
inputs, labels, etc.
Note: Some form controls, such as
<b-form-radio>
,
<b-form-checkbox>
, and
<b-form-file>
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 state
prop (bound to the state of the form control)
or the force-show
prop to display the feedback.
<template>
<div>
<b-form @submit.stop.prevent>
<label for="feedback-user">User ID</label>
<b-input v-model="userId" :state="validation" id="feedback-user"></b-input>
<b-form-invalid-feedback :state="validation">
Your user ID must be 5-12 characters long.
</b-form-invalid-feedback>
<b-form-valid-feedback :state="validation">
Looks Good.
</b-form-valid-feedback>
</b-form>
</div>
</template>
<script>
export default {
data() {
return {
userId: ''
}
},
computed: {
validation() {
return this.userId.length > 4 && this.userId.length < 13
}
}
}
</script>
<!-- b-form-feedback-example.vue -->
For browsers that support
<datalist>
elements, the
<b-form-datalist>
helper component will allow you to quickly create a <datalist>
and child
<option>
elements via an array passed to the options
prop.
You may also manually provide <option>
elements inside <b-form-datalist>
. They will appear below
any <option>
elements generated from the options
prop.
<template>
<label for="input-with-list">Input with datalist</label>
<b-form-input list="input-list" id="input-with-list"></b-form-input>
<b-form-datalist id="input-list" :options="options"></b-form-datalist>
</template>
<script>
export default {
data() {
return {
options: ['Apple', 'Banana', 'Grape', 'Kiwi', 'Orange']
}
}
}
</script>
<!-- b-form-datalist-example.vue -->
<b-form-datalist>
is also available via the shorter alias of <b-datalist>
.
See also:
<b-form-input> datalist
for datalist usage.<b-form-select> options
for more information on
the options
array format.Disable browser native HTML5 validation by setting the novalidate
prop to true on <b-form>
.
Set the validated
prop, on <b-form>
, to true
to add the Bootstrap v4 .was-validated
class to
the form to trigger validation states
All of the form controls support a state
prop, which can be used to set the form control into one
of three contextual states:
state
to false
(or the string 'invalid'
) is great for when there's a blocking or
required field. A user must fill in this field properly to submit the form.state
to true
(or the string 'valid'
) is ideal for situations when you have
per-field validation throughout a form and want to encourage a user through the rest of the
fields.state
to null
Displays no validation state.Refer to the Bootstrap v4 Form Validation Documentation for details on the new Bootstrap v4 validation states.
Documentation and examples (hopefully) coming soon.
Please see the following references:
<b-form>
Property | Type | Default Value |
---|---|---|
id | String | |
inline | Boolean | false |
novalidate | Boolean | false |
validated | Boolean | false |
Event | Arguments | Description |
---|---|---|
submit |
| Emitted when the form is being submitted |
<b-form-text>
Property | Type | Default Value |
---|---|---|
id | String | |
tag | String | small |
text-variant | String | muted |
inline | Boolean | false |
<b-form-invalid-feedback>
Property | Type | Default Value |
---|---|---|
id | String | |
tag | String | div |
tooltip | Boolean | false |
force-show | Boolean | false |
state | Boolean or String | |
aria-live | String | |
role | String |
<b-form-valid-feedback>
Property | Type | Default Value |
---|---|---|
id | String | |
tag | String | div |
tooltip | Boolean | false |
force-show | Boolean | false |
state | Boolean or String | |
aria-live | String | |
role | String |
<b-form-datalist>
can also be used via the following aliases:
<b-datalist>
Note: component aliases are only available when importing all of BootstrapVue or using the component group plugin.
Property | Type | Default Value |
---|---|---|
options | Array or Object | [] |
value-field | String | value |
text-field | String | text |
html-field | String | html |
disabled-field | String | disabled |
id Required | String |
CHANGED in 2.0.0-rc.22 You can import individual components into your project via the following named exports:
Component | Named Export | Import Path |
---|---|---|
<b-form> | BForm | bootstrap-vue |
<b-form-text> | BFormText | bootstrap-vue |
<b-form-invalid-feedback> | BFormInvalidFeedback | bootstrap-vue |
<b-form-valid-feedback> | BFormValidFeedback | bootstrap-vue |
<b-form-datalist> | BFormDatalist | bootstrap-vue |
Example:
import { BForm } from 'bootstrap-vue' Vue.component('b-form', BForm)
CHANGED in 2.0.0-rc.22 Importing plugins has been simplified.
This plugin includes all of the above listed individual components. Plugins also include any component aliases.
Named Export | Import Path |
---|---|
FormPlugin | bootstrap-vue |
Example:
import { FormPlugin } from 'bootstrap-vue' Vue.use(FormPlugin)