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.

On this page

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
      button="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
      button="outline-secondary"
      type="button"
    >
      Button
    </b-button>
  </BInputGroup>

  <BInputGroup margin="b-3">
    <b-button
      button="outline-secondary"
      type="button"
    >
      Button
    </b-button>
    <b-button
      button="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
      button="outline-secondary"
      type="button"
    >
      Button
    </b-button>
    <b-button
      button="outline-secondary"
      type="button"
    >
      Button
    </b-button>
  </BInputGroup>
</template>

Buttons with dropdowns

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

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

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

Segmented buttons

vue
<template>
  <BInputGroup margin="b-3">
    <b-button button="outline-secondary">
      Action
    </b-button>
    <Dropdown>
      <DropdownToggleSplit
        aria-expanded="false"
        button="outline-secondary"
      >
        <b-span visually-hidden>
          Toggle Dropdown
        </b-span>
      </DropdownToggleSplit>
      <DropdownMenu>
        <DropdownItem href="#">
          Action
        </DropdownItem>
        <DropdownItem href="#">
          Another action
        </DropdownItem>
        <DropdownItem href="#">
          Something else here
        </DropdownItem>
        <DropdownItemDivider />
        <DropdownItem href="#">
          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 button="outline-secondary">
      Action
    </b-button>
    <Dropdown>
      <DropdownToggleSplit
        aria-expanded="false"
        button="outline-secondary"
      >
        <b-span visually-hidden>
          Toggle Dropdown
        </b-span>
      </DropdownToggleSplit>
      <DropdownMenu alignment="end">
        <DropdownItem href="#">
          Action
        </DropdownItem>
        <DropdownItem href="#">
          Another action
        </DropdownItem>
        <DropdownItem href="#">
          Something else here
        </DropdownItem>
        <DropdownItemDivider />
        <DropdownItem href="#">
          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

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

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

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

Custom file input

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

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

  <BInputGroup margin="b-3">
    <b-button
      id="BInputGroupFileAddon03"
      button="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"
      button="outline-secondary"
    >
      Button
    </b-button>
  </BInputGroup>
</template>