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

Example

Default

@example.com

Your vanity URL

https://example.com/users/

.00

With textarea

<base-input placeholder="Username">
  <template slot="addonLeft">
    @
  </template>
</base-input>

<base-input placeholder="Recipient's username">
  <template slot="addonRight">
    @example.com
  </template>
</base-input>

<base-input label="Your vanity URL" placeholder="">
  <template slot="addonLeft">
    https://example.com/users/
  </template>
</base-input>

<base-input placeholder="">
  <template slot="addonLeft">
    $
  </template>
  <template slot="addonRight">
    .00
  </template>
</base-input>

<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">With textarea</span>
    </div>
    <textarea class="form-control" aria-label="With textarea"></textarea>
  </div>
</div>

Sizing

Small

Default

Large

<base-input placeholder="" class="input-group-sm">
  <template slot="addonLeft">
    Small
  </template>
</base-input>

<base-input placeholder="" class="input-group">
  <template slot="addonLeft">
    Default
  </template>
</base-input>

<base-input placeholder="" class="input-group-lg">
  <template slot="addonLeft">
    Large
  </template>
</base-input>

Checkboxes and radios

<base-input placeholder="">
  <template slot="addonLeft">
      <input type="checkbox" aria-label="Checkbox for following text input">
  </template>
</base-input>

<base-input placeholder="">
  <template slot="addonLeft">
      <input type="radio" aria-label="Radio for following text input">
  </template>
</base-input>

Multiple inputs

First and last name

<base-input placeholder="">
  <template slot="addonLeft">
      First and last name
  </template>
  <input type="text" aria-label="First name" class="form-control">
  <input type="text" aria-label="Last name" class="form-control">
</base-input>

Multiple addons

$ 0.00

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
  <div class="input-group-append">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
</div>

Button addons

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <base-button type="primary" outline>Button</base-button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Example text with button addon" aria-describedby="button-addon2">
  <div class="input-group-append">
    <base-button type="primary" outline>Button</base-button>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <base-button type="primary" outline>Button</base-button>
    <base-button type="primary" outline>Button</base-button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Example text with button addon" aria-describedby="button-addon2">
  <div class="input-group-append">
    <base-button type="primary" outline>Button</base-button>
    <base-button type="primary" outline>Button</base-button>
  </div>
</div>