Input Groups

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.

<div>
  <b-input-group left="$" right=".00">
    <b-form-input></b-form-input>
  </b-input-group>

  <br>

  <b-input-group size="lg" left="$" right=".00">
    <b-form-input></b-form-input>
  </b-input-group>

  <br>

  <b-input-group>
    <!-- Add-ons -->
    <b-input-group-addon>
      <strong class="text-danger">!</strong>
    </b-input-group-addon>
    <b-input-group-addon>
      Username
    </b-input-group-addon>

    <!-- Main form input -->
    <b-form-input></b-form-input>

    <!-- Attach Right button Group via slot -->
    <b-input-group-button slot="right">
      <b-dropdown text="Dropdown" variant="success" right>
        <b-dropdown-item>Action</b-dropdown-item>
        <b-dropdown-item>Action</b-dropdown-item>
      </b-dropdown>
      <b-btn variant="info">Button</b-btn>
    </b-input-group-button>

  </b-input-group>
</div>

<!-- input-groups-1.vue -->

Usage

You can attach left or right Addons via props or named slots

Via `left` and `right` props:

<div>
  <b-input-group left="$" right=".00">
    <b-form-input></b-form-input>
  </b-input-group>
</div>

<!-- input-group-addons-props.vue -->

Via named slots:

if you want better control over addons, you can use right and left slots instead:

<div>
  <b-input-group left="Username">
    <b-input-group-button slot="right">
      <b-dropdown text="Dropdown" variant="success">
        <b-dropdown-item>Action A</b-dropdown-item>
        <b-dropdown-item>Action B</b-dropdown-item>
      </b-dropdown>
    </b-input-group-button>
    <b-form-input></b-form-input>
  </b-input-group>
</div>

<!-- input-group-addons-slots.vue -->

Direct placement of sub components:

Use the <b-input-group-addon> to add arbitrary addons wherever you like, and use the <b-input-group-button> component to group buttons in your input group. Single buttons must always be wrapped in a <b-input-group-button> for proper styling

<div>
  <b-input-group>
    <b-input-group-addon>$</b-input-group-addon>
    <b-form-input type="number" min="0.00"></b-form-input>
    <b-input-group-addon>.00</b-input-group-addon>
    <b-input-group-button>
      <b-btn variant="success">Buy Now</b-btn>
    </b-input-group-button>
  </b-input-group>
</div>

<!-- input-group-addons-placement.vue -->

Checkbox and radio addons

Place any native checkbox or radio within an input group’s addon instead of text.

<b-container>
  <b-row>
    <b-col lg="6">
      <b-input-group>
        <b-input-group-addon>
          <input type="checkbox" aria-label="Checkbox for following text input">
        </b-input-group-addon>
        <b-form-input type="text" aria-label="Text input with checkbox" />
      </b-input-group>
    </b-col>
    <b-col lg="6">
      <b-input-group>
        <b-input-group-addon>
          <input type="radio" aria-label="Radio button for following text input">
        </b-input-group-addon>
        <b-form-input type="text" aria-label="Text input with radio button" />
      </b-input-group>
    </b-col>
  </b-row>
</b-container>

<!-- input-group-checks-radios.vue -->

Note: you must use native radio and checkbox inputs, as <b-form-radio> and <b-form-checkbox> include additional markup not required in input groups.

Multiple addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

<b-container>
  <b-row>
    <b-col lg="6">
      <b-input-group>
        <b-input-group-addon>
          <input type="checkbox" aria-label="Checkbox for following text input">
        </b-input-group-addon>
        <b-input-group-addon>$</b-input-group-addon>
        <b-form-input type="text" aria-label="Text input with checkbox" />
      </b-input-group>
    </b-col>
    <b-col lg="6">
      <b-input-group>
        <b-input-group-addon>$</b-input-group-addon>
        <b-input-group-addon>0.00</b-input-group-addon>
        <b-form-input type="text" aria-label="Text input multiple addons" />
      </b-input-group>
    </b-col>
  </b-row>
</b-container>

<!-- input-group-multiple.vue -->

Button addons

Buttons in input groups must wrapped in a <b-input-group-button> for proper alignment and sizing. This is required due to default browser styles that cannot be overridden. Multiple buttons can be placed inside a single <b-input-group-button>.

<b-container>
  <b-row>
    <b-col lg="6" class="mb-3">
      <b-input-group>
        <b-input-group-button>
          <b-button>Go!</b-button>
        </b-input-group-button>
        <b-form-input type="text" placeholder="Search for..." />
      </b-input-group>
    </b-col>
    <b-col lg="6" class="mb-3">
      <b-input-group>
        <b-form-input type="text" placeholder="Search for..." />
        <b-input-group-button>
          <b-button>Go!</b-button>
        </b-input-group-button>
      </b-input-group>
    </b-col>
  </b-row>
  <b-row>
    <b-col lg="6" class="mb-3">
      <b-input-group>
        <b-input-group-button>
          <b-button variant="success">Love It</b-button>
        </b-input-group-button>
        <b-form-input type="text" placeholder="Product" />
        <b-input-group-button>
          <b-button variant="danger">Hate It</b-button>
        </b-input-group-button>
      </b-input-group>
    </b-col>
    <b-col lg="6" class="mb-3">
      <b-input-group>
        <b-form-input type="text" placeholder="Product" />
        <b-input-group-button>
          <b-button variant="success">Add</b-button>
          <b-button variant="danger">Remove</b-button>
        </b-input-group-button>
      </b-input-group>
    </b-col>
  </b-row>
</b-container>

<!-- input-group-buttons.vue -->

Addons with dropdowns

Dropdowns, like buttons, must be placed inside a <b-input-group-button>

<div>
  <b-input-group>
    <b-form-input placeholder="Produt" />
    <b-input-group-button>
      <b-dropdown text="Dropdown" variant="success">
        <b-dropdown-item>Action A</b-dropdown-item>
        <b-dropdown-item>Action B</b-dropdown-item>
      </b-dropdown>
    </b-input-group-button>
  </b-input-group>
</div>

<!-- input-group-dropdowns.vue -->

Control sizing

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.

To control width, place the input inside standard Bootstrap grid column.

<div>
  <b-input-group size="sm" class="mb-3">
    <b-input-group-addon>Small</b-input-group-addon>
    <b-form-input type="text" />
    <b-input-group-button>
      <b-dropdown size="sm" text="Dropdown" variant="success">
        <b-dropdown-item>Action A</b-dropdown-item>
        <b-dropdown-item>Action B</b-dropdown-item>
      </b-dropdown>
    </b-input-group-button>
  </b-input-group>
  <b-input-group size="lg">
    <b-input-group-addon>Large</b-input-group-addon>
    <b-input-group-addon>$</b-input-group-addon>
    <b-form-input type="text" />
    <b-input-group-button>
      <b-button>Button</b-button>
    </b-input-group-button>
  </b-input-group>
</div>

<!-- input-group-size.vue -->

Contextual states

Bootstrap V4.beta currently does not support contextual state (i.e. valid or invalid) on input groups.

<b-input-group-addon>
<b-input-group-button>

Component aliases

<b-input-group-button> can also be used by the shorthand alias <b-input-group-btn>

Component Reference

`<b-input-group>`

view source

Properties

Property	Type	Default Value
id	String
size	String
left	String
right	String
tag	String	`div`

Slots

Slot	Description
left	Left attachment
right	Right attachment

Trying to get native browser events working on your component? Use the .native modifier to capture browser native events such as: @click.native="...", @mouseover.native="...", etc. See the the official Vue.js documentation for more information.

`<b-input-group-addon>`

view source

Properties

Property	Type	Default Value
id	String
tag	String	`div`

`<b-input-group-button>`

view source

Properties

Property	Type	Default Value
id	String
tag	String	`div`

Importing Individual Components

Component	Import Path
`<b-input-group>`	`bootstrap-vue/es/components/input-group/input-group`
`<b-input-group-addon>`	`bootstrap-vue/es/components/input-group/input-group-addon`
`<b-input-group-button>`	`bootstrap-vue/es/components/input-group/input-group-button`

Example:

import bInputGroup from 'bootstrap-vue/es/components/input-group/input-group';
Vue.component('b-input-group', bInputGroup);

Importing Input Group as a Vue plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

import { InputGroup } from 'bootstrap-vue/es/components';
Vue.use(InputGroup);

Input Groups

Usage

Via left and right props:

Via named slots:

Direct placement of sub components:

Checkbox and radio addons

Multiple addons

Button addons

Addons with dropdowns

Control sizing

Contextual states

Related sub-components

Component aliases

Component Reference

Properties

Slots

Properties

Properties

Importing Individual Components

Importing Input Group as a Vue plugin

Via `left` and `right` props: