Input group

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

Basic example

Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place FormLabels outside the input group.

@
@example.com
https://example.com/users/
$.00
@
With textarea
vue
<template>
 <BInputGroup margin="b-3">
  <BInputGroupText id="basic-addon1">
   @
  </BInputGroupText>
  <BFormInput
   type="text"
   placeholder="Username"
   aria-label="Username"
   aria-describedby="basic-addon1"
  />
 </BInputGroup>
 <BInputGroup margin="b-3">
  <BFormInput
   type="text"
   placeholder="Recipient's username"
   aria-label="Recipient's username"
   aria-describedby="basic-addon2"
  />
  <BInputGroupText id="basic-addon2">
   @example.com
  </BInputGroupText>
 </BInputGroup>
 <BFormLabel for="basic-url">
  Your vanity URL
 </BFormLabel>
 <BInputGroup margin="b-3">
  <BInputGroupText>https://example.com/users/</BInputGroupText>
  <BFormInput
   id="basic-url"
   type="text"
   aria-describedby="basic-addon3"
  />
 </BInputGroup>
 <BInputGroup margin="b-3">
  <BInputGroupText>$</BInputGroupText>
  <BFormInput
   type="text"
   aria-label="Amount (to the nearest dollar)"
  />
  <BInputGroupText>.00</BInputGroupText>
 </BInputGroup>
 <BInputGroup margin="b-3">
  <BFormInput
   type="text"
   placeholder="Username"
   aria-label="Username"
  />
  <BInputGroupText>@</BInputGroupText>
  <BFormInput
   type="text"
   placeholder="Server"
   aria-label="Server"
  />
 </BInputGroup>

 <BInputGroup margin="b-3">
  <BInputGroupText>With textarea</BInputGroupText>
  <BFormTextarea aria-label="With textarea" />
 </BInputGroup>
</template>

Wrapping

Input groups wrap by default via wrap = wrap in order to accommodate custom form field validation within an input group. You may disable this with wrap="nowrap".

@
vue
<template>
 <BInputGroup
  wrap="nowrap"
  margin="b-3"
 >
  <BInputGroupText id="addon-wrapping">
   @
  </BInputGroupText>
  <BFormInput
   type="text"
   placeholder="Username"
   aria-label="Username"
   aria-describedby="addon-wrapping"
  />
 </BInputGroup>
</template>

Sizing

Add the relative form sizing classes to the BInputGroup itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

Sizing on the individual input group elements isn't supported.

Small
Default
Large
vue
<template>
 <BInputGroup
  size="sm"
  margin="b-3"
 >
  <BInputGroupText id="BInputGroup-sizing-sm">
   Small
  </BInputGroupText>
  <BFormInput
   type="text"
   aria-label="Sizing example input"
   aria-describedby="BInputGroup-sizing-sm"
  />
 </BInputGroup>

 <BInputGroup margin="b-3">
  <BInputGroupText id="BInputGroup-sizing-default">
   Default
  </BInputGroupText>
  <BFormInput
   type="text"
   aria-label="Sizing example input"
   aria-describedby="BInputGroup-sizing-default"
  />
 </BInputGroup>

 <BInputGroup
  size="lg"
  margin="b-3"
 >
  <BInputGroupText id="BInputGroup-sizing-lg">
   Large
  </BInputGroupText>
  <BFormInput
   type="text"
   aria-label="Sizing example input"
   aria-describedby="BInputGroup-sizing-lg"
  />
 </BInputGroup>
</template>

<style src="./example_input-group.scss" scoped></style>

Checkboxes and radios

Place any checkbox or radio option within an input group's addon instead of text.

We recommend adding margin="t-0" to the FormCheckInput when there's no visible text next to the input.

vue
<template>
 <BInputGroup margin="b-3">
  <BInputGroupText>
   <BFormCheckInput
    margin="t-0"
    type="checkbox"
    value
    aria-label="Checkbox for following text input"
   />
  </BInputGroupText>
  <BFormInput
   type="text"
   placeholder="Username"
   aria-label="Text input with checkbox"
  />
 </BInputGroup>

 <BInputGroup margin="b-3">
  <BInputGroupText>
   <BFormCheckInput
    margin="t-0"
    type="radio"
    value
    aria-label="Radio button for following text input"
   />
  </BInputGroupText>
  <BFormInput
   type="text"
   placeholder="Username"
   aria-label="Text input with radio button"
  />
 </BInputGroup>
</template>

Multiple inputs

While multiple FormInputs are supported visually, validation styles are only available for input groups with a single FormInput.

First and last name
vue
<template>
 <BInputGroup margin="b-3">
  <BInputGroupText>First and last name</BInputGroupText>
  <BFormInput
   type="text"
   aria-label="First name"
  />
  <BFormInput
   type="text"
   aria-label="Last name"
  />
 </BInputGroup>
</template>

Multiple addons

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

$0.00
$0.00
vue
<template>
 <BInputGroup margin="b-3">
  <BInputGroupText>$</BInputGroupText>
  <BInputGroupText>0.00</BInputGroupText>
  <BFormInput
   type="text"
   aria-label="Dollar amount (with dot and two decimal places)"
  />
 </BInputGroup>

 <BInputGroup margin="b-3">
  <BFormInput
   type="text"
   aria-label="Dollar amount (with dot and two decimal places)"
  />
  <BInputGroupText>$</BInputGroupText>
  <BInputGroupText>0.00</BInputGroupText>
 </BInputGroup>
</template>

Button addons

vue
<template>
 <BInputGroup margin="b-3">
  <b-button
   color="outline-secondary"
   type="button"
  >
   Button
  </b-button>
  <BFormInput
   type="text"
   placeholder
   aria-label="Example text with button addon"
   aria-describedby="button-addon1"
  />
 </BInputGroup>

 <BInputGroup margin="b-3">
  <BFormInput
   type="text"
   placeholder="Recipient's username"
   aria-label="Recipient's username"
   aria-describedby="button-addon2"
  />
  <b-button
   color="outline-secondary"
   type="button"
  >
   Button
  </b-button>
 </BInputGroup>

 <BInputGroup margin="b-3">
  <b-button
   color="outline-secondary"
   type="button"
  >
   Button
  </b-button>
  <b-button
   color="outline-secondary"
   type="button"
  >
   Button
  </b-button>
  <BFormInput
   type="text"
   placeholder
   aria-label="Example text with two button addons"
  />
 </BInputGroup>

 <BInputGroup margin="b-3">
  <BFormInput
   type="text"
   placeholder="Recipient's username"
   aria-label="Recipient's username with two button addons"
  />
  <b-button
   color="outline-secondary"
   type="button"
  >
   Button
  </b-button>
  <b-button
   color="outline-secondary"
   type="button"
  >
   Button
  </b-button>
 </BInputGroup>
</template>

Buttons with dropdowns

vue
<template>
 <BInputGroup margin="b-3">
  <Dropdown>
   <DropdownToggle color="outline-secondary">
    Dropdown
   </DropdownToggle>
   <DropdownMenu>
    <DropdownItem to="/">
     Action
    </DropdownItem>
    <DropdownItem to="/">
     Another action
    </DropdownItem>
    <DropdownItem to="/">
     Something else here
    </DropdownItem>
    <DropdownItemDivider />
    <DropdownItem to="/">
     Separated link
    </DropdownItem>
   </DropdownMenu>
  </Dropdown>
  <BFormInput
   type="text"
   aria-label="Text input with dropdown button"
  />
 </BInputGroup>

 <BInputGroup margin="b-3">
  <BFormInput
   type="text"
   aria-label="Text input with dropdown button"
  />
  <Dropdown>
   <DropdownToggle color="outline-secondary">
    Dropdown
   </DropdownToggle>
   <DropdownMenu alignment="end">
    <DropdownItem to="/">
     Action
    </DropdownItem>
    <DropdownItem to="/">
     Another action
    </DropdownItem>
    <DropdownItem to="/">
     Something else here
    </DropdownItem>
    <DropdownItemDivider />
    <DropdownItem to="/">
     Separated link
    </DropdownItem>
   </DropdownMenu>
  </Dropdown>
 </BInputGroup>

 <BInputGroup margin="b-3">
  <Dropdown>
   <DropdownToggle
    aria-expanded="false"
    color="outline-secondary"
   >
    Dropdown
   </DropdownToggle>
   <DropdownMenu>
    <DropdownItem to="/">
     Action
    </DropdownItem>
    <DropdownItem to="/">
     Another action
    </DropdownItem>
    <DropdownItem to="/">
     Something else here
    </DropdownItem>
    <DropdownItemDivider />
    <DropdownItem to="/">
     Separated link
    </DropdownItem>
   </DropdownMenu>
  </Dropdown>
  <BFormInput
   type="text"
   aria-label="Text input with 2 dropdown buttons"
  />
  <Dropdown>
   <DropdownToggle
    aria-expanded="false"
    color="outline-secondary"
   >
    Dropdown
   </DropdownToggle>
   <DropdownMenu alignment="end">
    <DropdownItem to="/">
     Action
    </DropdownItem>
    <DropdownItem to="/">
     Another action
    </DropdownItem>
    <DropdownItem to="/">
     Something else here
    </DropdownItem>
    <DropdownItemDivider />
    <DropdownItem to="/">
     Separated link
    </DropdownItem>
   </DropdownMenu>
  </Dropdown>
 </BInputGroup>
</template>

Segmented buttons

vue
<template>
 <BInputGroup margin="b-3">
  <b-button color="outline-secondary">
   Action
  </b-button>
  <Dropdown>
   <DropdownToggleSplit
    aria-expanded="false"
    color="outline-secondary"
   >
    <b-span visually-hidden>
     Toggle Dropdown
    </b-span>
   </DropdownToggleSplit>
   <DropdownMenu>
    <DropdownItem to="/">
     Action
    </DropdownItem>
    <DropdownItem to="/">
     Another action
    </DropdownItem>
    <DropdownItem to="/">
     Something else here
    </DropdownItem>
    <DropdownItemDivider />
    <DropdownItem to="/">
     Separated link
    </DropdownItem>
   </DropdownMenu>
  </Dropdown>
  <BFormInput
   type="text"
   aria-label="Text input with segmented dropdown button"
  />
 </BInputGroup>

 <BInputGroup margin="b-3">
  <BFormInput
   type="text"
   aria-label="Text input with segmented dropdown button"
  />
  <b-button color="outline-secondary">
   Action
  </b-button>
  <Dropdown>
   <DropdownToggleSplit
    aria-expanded="false"
    color="outline-secondary"
   >
    <b-span visually-hidden>
     Toggle Dropdown
    </b-span>
   </DropdownToggleSplit>
   <DropdownMenu alignment="end">
    <DropdownItem to="/">
     Action
    </DropdownItem>
    <DropdownItem to="/">
     Another action
    </DropdownItem>
    <DropdownItem to="/">
     Something else here
    </DropdownItem>
    <DropdownItemDivider />
    <DropdownItem to="/">
     Separated link
    </DropdownItem>
   </DropdownMenu>
  </Dropdown>
 </BInputGroup>
</template>

Custom forms

Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.

Custom select

options
options
vue
<template>
 <BInputGroup margin="b-3">
  <BInputGroupText for="BInputGroupSelect01">
   options
  </BInputGroupText>
  <BFormSelect
   id="BInputGroupSelect01"
   v-model="selected_sample"
  >
   <option>
    Choose...
   </option>
   <option value="1">
    One
   </option>
   <option value="2">
    Two
   </option>
   <option value="3">
    Three
   </option>
  </BFormSelect>
 </BInputGroup>

 <BInputGroup margin="b-3">
  <BFormSelect
   id="BInputGroupSelect02"
   v-model="selected_sample"
  >
   <option>
    Choose...
   </option>
   <option value="1">
    One
   </option>
   <option value="2">
    Two
   </option>
   <option value="3">
    Three
   </option>
  </BFormSelect>
  <BInputGroupText for="BInputGroupSelect02">
   options
  </BInputGroupText>
 </BInputGroup>

 <BInputGroup margin="b-3">
  <b-button
   color="outline-secondary"
   type="button"
  >
   Button
  </b-button>
  <BFormSelect
   id="BInputGroupSelect03"
   v-model="selected_sample"
   aria-label="Example select with button addon"
  >
   <option>
    Choose...
   </option>
   <option value="1">
    One
   </option>
   <option value="2">
    Two
   </option>
   <option value="3">
    Three
   </option>
  </BFormSelect>
 </BInputGroup>
 <BInputGroup margin="b-3">
  <BFormSelect
   id="BInputGroupSelect04"
   v-model="selected_sample"
   aria-label="Example select with button addon"
  >
   <option>
    Choose...
   </option>
   <option value="1">
    One
   </option>
   <option value="2">
    Two
   </option>
   <option value="3">
    Three
   </option>
  </BFormSelect>
  <b-button
   color="outline-secondary"
   type="button"
  >
   Button
  </b-button>
 </BInputGroup>
</template>

<script setup>
const selected_sample = ref('Choose...');
</script>

Custom file input

Upload
Upload
vue
<template>
 <BInputGroup margin="b-3">
  <BInputGroupText for="BInputGroupFile01">
   Upload
  </BInputGroupText>
  <BFormFile id="BInputGroupFile01" />
 </BInputGroup>

 <BInputGroup margin="b-3">
  <BFormFile id="BInputGroupFile02" />
  <BInputGroupText for="BInputGroupFile02">
   Upload
  </BInputGroupText>
 </BInputGroup>

 <BInputGroup margin="b-3">
  <b-button
   id="BInputGroupFileAddon03"
   color="outline-secondary"
  >
   Button
  </b-button>
  <BFormFile
   id="BInputGroupFile03"
   aria-describedby="BInputGroupFileAddon03"
   aria-label="Upload"
  />
 </BInputGroup>

 <BInputGroup margin="b-3">
  <BFormFile
   id="BInputGroupFile04"
   aria-describedby="BInputGroupFileAddon04"
   aria-label="Upload"
  />
  <b-button
   id="BInputGroupFileAddon04"
   color="outline-secondary"
  >
   Button
  </b-button>
 </BInputGroup>
</template>

See Also

Forms overview

Form control

Select

Checks & radios

Range

Floating labels

Form layout

Validation

Password strength

Editor

Viewstate

Actionstate