BootstrapVue Input Group

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

Example

Default

@example.com

Your vanity URL

https://example.com/users/

.00

With textarea

<b-form-group>
  <b-input-group prepend="@">
    <b-form-input placeholder="Username"></b-form-input>
  </b-input-group>
</b-form-group>

<b-form-group>
  <b-input-group append="@example.com">
    <b-form-input placeholder="Recipient's username"></b-form-input>
  </b-input-group>
</b-form-group>

<b-form-group label="Your vanity URL">
  <b-input-group prepend="https://example.com/users/">
    <b-form-input></b-form-input>
  </b-input-group>
</b-form-group>

<b-form-group>
  <b-input-group prepend="$" append=".00">
    <b-form-input></b-form-input>
  </b-input-group>
</b-form-group>

<b-form-group>
  <b-input-group prepend="With textarea">
    <b-form-textarea></b-form-textarea>
  </b-input-group>
</b-form-group>

Merged

You can choose to merge input group elements by removing the border between them using the .input-group-merge modifier class.

@example.com

Your vanity URL

https://example.com/users/

.00

With textarea

<b-form-group>
  <b-input-group prepend="@" class="input-group-merge">
    <b-form-input placeholder="Username"></b-form-input>
  </b-input-group>
</b-form-group>

<b-form-group>
  <b-input-group append="@example.com" class="input-group-merge">
    <b-form-input placeholder="Recipient's username"></b-form-input>
  </b-input-group>
</b-form-group>

<b-form-group label="Your vanity URL">
  <b-input-group prepend="https://example.com/users/" class="input-group-merge">
    <b-form-input></b-form-input>
  </b-input-group>
</b-form-group>

<b-form-group>
  <b-input-group prepend="$" append=".00" class="input-group-merge">
    <b-form-input></b-form-input>
  </b-input-group>
</b-form-group>

<b-form-group>
  <b-input-group prepend="With textarea" class="input-group-merge">
    <b-form-textarea></b-form-textarea>
  </b-input-group>
</b-form-group

Sizing

Small

Default

Large

<div>
  <b-input-group
    size="sm"
    class="mb-3"
    prepend="Small"
  >
    <b-form-input></b-form-input>
  </b-input-group>

  <b-input-group
    size=""
    class="mb-3"
    prepend="Default"
  >
    <b-form-input></b-form-input>
  </b-input-group>

  <b-input-group
    size="lg"
    class="mb-3"
    prepend="Large"
  >
    <b-form-input></b-form-input>
  </b-input-group>
</div>

Checkboxes and radios

<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>

Multiple inputs

First and last name

<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>

Multiple addons

$ 0.00

<div>
  <b-input-group prepend="$">
    <b-input-group-prepend is-text>0.00</b-input-group-prepend>
    <b-form-input type="number" aria-label="Text input with checkbox"></b-form-input>
  </b-input-group>
</div>
<br>
<br>
<div>
  <b-input-group append="0.00">
    <b-form-input type="number" aria-label="Text input with checkbox"></b-form-input>
    <b-input-group-append is-text>$</b-input-group-append>
  </b-input-group>
</div>

Button addons

<div>
  <b-input-group>
    <b-input-group-prepend>
      <b-button variant="outline-primary">Button</b-button>
    </b-input-group-prepend>

    <b-form-input type="number" min="0.00"></b-form-input>

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

    <b-form-input type="number" min="0.00" placeholder="Recipient's username"></b-form-input>

    <b-input-group-append>
      <b-button variant="outline-primary">Button</b-button>
    </b-input-group-append>

  </b-input-group>
</div>
<br>
<br>
<div>
  <b-input-group>
    <b-input-group-prepend>
      <b-button variant="outline-primary">Button</b-button>
    </b-input-group-prepend>
    <b-input-group-prepend>
      <b-button variant="outline-primary">Button</b-button>
    </b-input-group-prepend>

    <b-form-input type="number" min="0.00"></b-form-input>

  </b-input-group>
</div>
<br>
<br>
<div>
  <b-input-group>
    <b-form-input type="number" min="0.00" placeholder="Recipient's username"></b-form-input>

    <b-input-group-append>
      <b-button variant="outline-primary">Button</b-button>
    </b-input-group-append>
    <b-input-group-append>
      <b-button variant="outline-primary">Button</b-button>
    </b-input-group-append>

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

If you want to see more examples and properties please check the official BootstrapVue Documentation.