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>