BootstrapVue Input

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