Properties
Property | Type | Default Value |
---|---|---|
id | String | |
size | String | |
prepend | String | |
prepend-html | String | |
append | String | |
append-html | String | |
tag | String | div |
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.
<div>
<!-- Using props -->
<b-input-group size="lg" prepend="$" append=".00">
<b-form-input></b-form-input>
</b-input-group>
<!-- Using slots -->
<b-input-group class="mt-3">
<b-input-group-text slot="append"><strong class="text-danger">!</strong></b-input-group-text>
<b-form-input></b-form-input>
</b-input-group>
<!-- Using components -->
<b-input-group prepend="Username" class="mt-3">
<b-form-input></b-form-input>
<b-input-group-append>
<b-button variant="outline-success">Button</b-button>
<b-button variant="info">Button</b-button>
</b-input-group-append>
</b-input-group>
</div>
<!-- b-input-group.vue -->
You can attach addons using either props, named slots and/or sub-components.
prepend
and append
propsValues will be internally wrapped by a <b-input-group-text>
to display correctly.
<div>
<b-input-group prepend="$" append=".00">
<b-form-input></b-form-input>
</b-input-group>
<b-input-group prepend="0" append="100" class="mt-3">
<b-form-input type="range" min="0" max="100"></b-form-input>
</b-input-group>
</div>
<!-- b-input-group-using-props.vue -->
if you want better control over addons, you can use prepend
and append
slots instead.
The slot content will automatically be wrapped by
<b-input-group-prepend>
or <b-input-group-append>
to display correctly.
<div>
<b-input-group>
<b-input-group-text slot="prepend">Username</b-input-group-text>
<b-form-input></b-form-input>
<b-dropdown text="Dropdown" variant="success" slot="append">
<b-dropdown-item>Action A</b-dropdown-item>
<b-dropdown-item>Action B</b-dropdown-item>
</b-dropdown>
</b-input-group>
</div>
<!-- b-input-group-using-slots.vue -->
Use the <b-input-group-prepend>
or <b-input-group-append>
to add arbitrary addons wherever you
like, and use these components to group buttons in your input group. Single buttons must always be
wrapped in these components for proper styling.
<div>
<b-input-group>
<b-input-group-prepend>
<b-button variant="outline-info">Button</b-button>
</b-input-group-prepend>
<b-form-input type="number" min="0.00"></b-form-input>
<b-input-group-append>
<b-button variant="outline-secondary">Button</b-button>
<b-button variant="outline-secondary">Button</b-button>
</b-input-group-append>
</b-input-group>
</div>
<!-- b-input-group-addons-placement.vue -->
Set the is-text
prop on <b-input-group-prepend>
or <b-input-group-append>
if the content is
textual in nature to apply proper styling. Alternatively, place the <b-input-group-text>
subcomponent inside of the <b-input-group-prepend>
or <b-input-group-append>
.
The following are the form controls supported as the input-group's main input element:
<b-form-input>
<b-form-textarea>
<b-form-select>
<b-form-file>
Notes:
<b-form-file>
input when it is placed
in a <b-input-group>
which has a size
specified.<b-form-input type="range">
is placed in a
<b-input-group>
.Place any checkbox or radio within an input group's addon instead of text.
Note: Bootstrap v4.x recommends using native radio and checkbox inputs over custom radios and
checkboxes, but it is possible to use as <b-form-radio>
and <b-form-checkbox>
with a few utility
classes applied.
<div>
<b-input-group class="mb-2">
<b-input-group-prepend is-text>
<input type="checkbox" aria-label="Checkbox for following text input">
</b-input-group-prepend>
<b-form-input aria-label="Text input with checkbox"></b-form-input>
</b-input-group>
<b-input-group>
<b-input-group-prepend is-text>
<input type="radio" aria-label="Radio for following text input">
</b-input-group-prepend>
<b-form-input aria-label="Text input with radio input"></b-form-input>
</b-input-group>
</div>
<!-- b-input-group-checks-radios.vue -->
NEW in 2.0.0-rc.28
Using <b-form-checkbox>
and <b-form-radio>
components as addons, using Bootstrap
utility classes for additional styling to get them to "fit" in
the addon:
<div>
<b-input-group class="mb-2">
<b-input-group-prepend is-text>
<b-form-checkbox class="mr-n2">
<span class="sr-only">Checkbox for following text input</span>
</b-form-checkbox>
</b-input-group-prepend>
<b-form-input aria-label="Text input with checkbox"></b-form-input>
</b-input-group>
<b-input-group class="mb-2">
<b-input-group-prepend is-text>
<b-form-radio class="mr-n2">
<span class="sr-only">Radio for following text input</span>
</b-form-radio>
</b-input-group-prepend>
<b-form-input aria-label="Text input with radio input"></b-form-input>
</b-input-group>
<b-input-group>
<b-input-group-prepend is-text>
<b-form-checkbox switch class="mr-n2">
<span class="sr-only">Switch for following text input</span>
</b-form-checkbox>
</b-input-group-prepend>
<b-form-input aria-label="Text input with switch"></b-form-input>
</b-input-group>
</div>
<!-- b-input-group-custom-checks-radios.vue -->
In the above example, we have use the .sr-only
class on a <span>
to visually hide the custom
control's label content (while making them still accessible to screen reader users), and used the
utility class .mr-n2
to add a negative right margin to compensate for the "gutter" space between
the control and the hidden label.
<div>
<b-input-group prepend="First and last name" class="mb-2">
<b-form-input aria-label="First name"></b-form-input>
<b-form-input aria-label="Last name"></b-form-input>
</b-input-group>
</div>
<!-- input-group-multiple-inputs.vue -->
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
<div>
<b-input-group prepend="Item">
<b-input-group-prepend is-text>
<input type="checkbox" aria-label="Checkbox for following text input">
</b-input-group-prepend>
<b-input-group-prepend is-text><b>$</b></b-input-group-prepend>
<b-form-input type="number" aria-label="Text input with checkbox"></b-form-input>
</b-input-group>
</div>
<!-- b-input-group-multiple-addons.vue -->
<div>
<b-input-group>
<b-dropdown slot="prepend" text="Dropdown" variant="info">
<b-dropdown-item>Action A</b-dropdown-item>
<b-dropdown-item>Action B</b-dropdown-item>
</b-dropdown>
<b-form-input></b-form-input>
<b-dropdown slot="append" text="Dropdown" variant="outline-secondary" v-for="i in 2" :key="i">
<b-dropdown-item>Action C</b-dropdown-item>
<b-dropdown-item>Action D</b-dropdown-item>
</b-dropdown>
</b-input-group>
</div>
<!-- b-input-group-dropdown.vue -->
Set height using the size
prop to sm
or lg
for small or large respectively. There is no need
to set size on the individual inputs or buttons. Note however, you will be required to also set
the size on dropdowns.
<div>
<b-input-group
v-for="size in ['sm','','lg']"
:key="size"
:size="size"
class="mb-3"
prepend="Label"
>
<b-form-input></b-form-input>
<b-input-group-append>
<b-button size="sm" text="Button" variant="success">Button</b-button>
</b-input-group-append>
</b-input-group>
</div>
<!-- b-input-group-size.vue -->
To control width, place the input inside standard Bootstrap grid column.
NEW in 2.0.0-rc.28
If using <b-form-radio>
or <b-form-checkbox>
as addons, additional utility classes may be
required to make everything fit correctly, depending on the size chosen:
<div>
<b-input-group size="sm" prepend="Small" class="mb-2">
<b-form-input aria-label="Small text input with custom switch"></b-form-input>
<b-input-group-append is-text>
<b-form-checkbox switch class="mr-n2 mb-n1">
<span class="sr-only">Checkbox for previous text input</span>
</b-form-checkbox>
</b-input-group-append>
</b-input-group>
<b-input-group size="lg" prepend="Large" class="mb-2">
<b-form-input aria-label="Large text input with switch"></b-form-input>
<b-input-group-append is-text>
<b-form-checkbox switch class="mr-n2">
<span class="sr-only">Switch for previous text input</span>
</b-form-checkbox>
</b-input-group-append>
</b-input-group>
</div>
<!-- b-input-group-custom-checks-radios-sizing.vue -->
Specifically, when using the sm
size on <b-input-group>
you will need to add a negative bottom
margin, via the use of the .mb-n1
utility class.
Bootstrap v4 currently does not support contextual state styling (i.e. valid or invalid) of input groups. However, the inputs inside the input group do support contextual state.
<b-input-group>
Property | Type | Default Value |
---|---|---|
id | String | |
size | String | |
prepend | String | |
prepend-html | String | |
append | String | |
append-html | String | |
tag | String | div |
Slot | Description |
---|---|
prepend | Prepend attachment |
append | Append attachment |
<b-input-group-prepend>
Property | Type | Default Value |
---|---|---|
id | String | |
tag | String | div |
is-text | Boolean | false |
<b-input-group-append>
Property | Type | Default Value |
---|---|---|
id | String | |
tag | String | div |
is-text | Boolean | false |
<b-input-group-text>
Property | Type | Default Value |
---|---|---|
tag | String | div |
<b-input-group-addon>
Property | Type | Default Value |
---|---|---|
id | String | |
tag | String | div |
is-text | Boolean | false |
append | Boolean | false |
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-input-group> | BInputGroup | bootstrap-vue |
<b-input-group-prepend> | BInputGroupPrepend | bootstrap-vue |
<b-input-group-append> | BInputGroupAppend | bootstrap-vue |
<b-input-group-text> | BInputGroupText | bootstrap-vue |
<b-input-group-addon> | BInputGroupAddon | bootstrap-vue |
Example:
import { BInputGroup } from 'bootstrap-vue' Vue.component('b-input-group', BInputGroup)
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 |
---|---|
InputGroupPlugin | bootstrap-vue |
Example:
import { InputGroupPlugin } from 'bootstrap-vue' Vue.use(InputGroupPlugin)