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>

Properties

PropertyTypeDefault Value
idString
sizeString
leftString
rightString
tagStringdiv

Slots

SlotDescription
leftLeft attachment
rightRight 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>

Properties

PropertyTypeDefault Value
idString
tagStringdiv

<b-input-group-button>

Properties

PropertyTypeDefault Value
idString
tagStringdiv

Importing Individual Components

ComponentImport 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);