Svelte Input Group

Easily extend form controls with Svelte 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 
<BaseInput
  group="prepend"
  placeholder="Username">
  <small slot="prepend">@</small>
</BaseInput>

<BaseInput
  group="append"
  placeholder="Recipient's username">
  <small slot="append">@example.com</small>
</BaseInput>

<BaseInput
  group="prepend"
  label="Your vanity URL">
  <small slot="prepend">https://example.com/users/</small>
</BaseInput>

<BaseInput
  group="append prepend"
  prependIcon="fas fa-dollar-sign">
  <small slot="append">.00</small>
</BaseInput>


<BaseInput group="prepend">
  <textarea
    class="form-control"
    row="3" />
    <small slot="prepend">With textarea</small>
</BaseInput>

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 
<BaseInput
  inputGroupClasses="input-group-merge"
  group="prepend"
  placeholder="Username">
  <small slot="prepend">@</small>
</BaseInput>

<BaseInput
  inputGroupClasses="input-group-merge"
  group="append"
  placeholder="Recipient's username">
  <small slot="append">@example.com</small>
</BaseInput>

<BaseInput
  inputGroupClasses="input-group-merge"
  group="prepend"
  label="Your vanity URL">
  <small slot="prepend">https://example.com/users/</small>
</BaseInput>

<BaseInput
  inputGroupClasses="input-group-merge"
  group="append prepend"
  prependIcon="fas fa-dollar-sign">
  <small slot="append">.00</small>
</BaseInput>


<BaseInput group="prepend" inputGroupClasses="input-group-merge">
  <textarea
    class="form-control"
    row="3" />
    <small slot="prepend">With textarea</small>
</BaseInput>

Sizing

Small
Default
Large 
<BaseInput
  inputGroupClasses="input-group-sm"
  group="prepend">
  <small slot="prepend">Small</small>
</BaseInput>

<BaseInput
  group="prepend">
  <small slot="prepend">Default</small>
</BaseInput>

<BaseInput
  inputGroupClasses="input-group-lg"
  group="prepend">
  <small slot="prepend">Large</small>
</BaseInput>

Checkboxes and radios

<BaseInput
  group="prepend">
  <small slot="prepend">
  <BaseCheckbox model="unchecked: false" class="mb-3">
  </BaseCheckbox>
  </small>
</BaseInput>

<BaseInput
  group="prepend">
  <small slot="prepend">
  <BaseRadio model="unchecked: false" class="mb-3">
  </BaseRadio>
  </small>
</BaseInput>

Multiple inputs

First and last name 
<BaseInput
  group="prepend">
  <input type="text" aria-label="First name" class="form-control">
  <input type="text" aria-label="First name" class="form-control">
  <small slot="prepend">First and last name</small>
</BaseInput>

Multiple addons

$ 0.00
$ 0.00 
<BaseInput
  group="prepend">
  <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)">
</BaseInput>

<BaseInput
  group="append">
  <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>
</BaseInput>

Button addons

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

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

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

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