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
https://example.com/users/
$
.00
With textarea
Copy
<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
https://example.com/users/
$
.00
With textarea
Copy
<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
Copy
<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

Copy
<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
Copy
<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
$ 0.00
Copy
<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

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