New

Powerful Svelte-Bootstrap SaaS App Template

Admin CRM Application Template

Robust Next.js SaaS App Template

Powerful React-Bootstrap SaaS App Template

Modern Remix SaaS App Template

VueJS-Bootstrap SaaS App Template

Intuitive Nuxt-Bootstrap SaaS App Template

Input group

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

Basic Example

Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>s outside the input group.

@example.com

Your vanity URL

https://example.com/users/

$.00

With textarea

http://.com

<div class="input-group mb-3">
	<span class="input-group-text" id="basic-addon1">@</span>
	<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
	<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-3">
	<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
	<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
	<span class="input-group-text">$</span>
	<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
	<span class="input-group-text">.00</span>
</div>
<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="Username" aria-label="Username">
	<span class="input-group-text">@</span>
	<input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div>
<div class="input-group mb-3">
	<span class="input-group-text"><i class="fa fa-user"></i></span>
	<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
	<span class="input-group-text">With textarea</span>
	<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<div class="input-group mb-3">
	<span class="input-affix-wrapper">
		<span class="input-prefix"><i class="fa fa-user"></i></span>
		<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
	</span>
</div>
<div class="input-group mb-3">
	<span class="input-affix-wrapper">
		<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
		<span class="input-suffix"><i class="fa fa-user"></i></span>
	</span>
</div>
<div class="input-group mb-3">
	<span class="input-group-text">http://</span>
	<span class="input-affix-wrapper affix-wth-text">
		<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
		<span class="input-suffix">.com</span>
	</span>
</div>
<div class="input-group">
	<span class="input-affix-wrapper">
		<input type="text" class="form-control" placeholder="input search text" aria-label="Username" aria-describedby="basic-addon1">
		<span class="input-suffix"><i class="fa fa-microphone"></i></span>
	</span>
	<button class="btn btn-primary">Search</button>
</div>

<template>
<div class="input-group mb-3">
	<span class="input-group-text" id="basic-addon1">@</span>
	<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
	<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-3">
	<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
	<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
	<span class="input-group-text">$</span>
	<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
	<span class="input-group-text">.00</span>
</div>
<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="Username" aria-label="Username">
	<span class="input-group-text">@</span>
	<input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div>
<div class="input-group mb-3">
	<span class="input-group-text"><i class="fa fa-user"></i></span>
	<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
	<span class="input-group-text">With textarea</span>
	<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<div class="input-group mb-3">
	<span class="input-affix-wrapper">
		<span class="input-prefix"><i class="fa fa-user"></i></span>
		<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
	</span>
</div>
<div class="input-group mb-3">
	<span class="input-affix-wrapper">
		<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
		<span class="input-suffix"><i class="fa fa-user"></i></span>
	</span>
</div>
<div class="input-group mb-3">
	<span class="input-group-text">http://</span>
	<span class="input-affix-wrapper affix-wth-text">
		<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
		<span class="input-suffix">.com</span>
	</span>
</div>
<div class="input-group">
	<span class="input-affix-wrapper">
		<input type="text" class="form-control" placeholder="input search text" aria-label="Username" aria-describedby="basic-addon1">
		<span class="input-suffix"><i class="fa fa-microphone"></i></span>
	</span>
	<button class="btn btn-primary">Search</button>
</div>
</template>

<template>
    <BCol>
        <BInputGroup prepend="@" class="mb-3">
            <BFormInput placeholder="Username" />
        </BInputGroup>
        <BInputGroup append="@example.com" class="mb-3">
            <BFormInput placeholder="Recipient's username" />
        </BInputGroup>
        <label for="basic-addon3" class="form-label">Your vanity URL</label>
        <BInputGroup prepend="https://example.com/users/" class="mb-3">
            <BFormInput id="basic-addon3" />
        </BInputGroup>
        <BInputGroup prepend="$" append=".00" class="mb-3">
            <BFormInput />
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BFormInput placeholder="Username" />
            <BInputGroupText>@</BInputGroupText>
            <BFormInput placeholder="Server" />
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BInputGroupText><i class="fa fa-user"></i></BInputGroupText>
            <BFormInput placeholder="Username" />
        </BInputGroup>
            <!-- or -->
        <!-- <BInputGroup prepend-html='<i class="fa fa-user"></i>' class="mb-3">
            <BFormInput placeholder="Username" />
        </BInputGroup> -->
        <BInputGroup prepend="With textarea" class="mb-3">
            <BFormTextarea />
        </BInputGroup>
        <BInputGroup class="mb-3">
            <span class="input-affix-wrapper">
                <span class="input-prefix"><i class="fa fa-user"></i></span>
                <BFormInput placeholder="Username" />
            </span>
        </BInputGroup>
        <BInputGroup class="mb-3">
            <span class="input-affix-wrapper">
                <BFormInput placeholder="Username" />
                <span class="input-suffix"><i class="fa fa-user"></i></span>
            </span>
        </BInputGroup>
        <BInputGroup prepend="http://" class="mb-3">
            <span class="input-affix-wrapper">
                <BFormInput placeholder="domain" />
                <span class="input-suffix">.com</span>
            </span>
        </BInputGroup>
        <BInputGroup class="mb-3">
            <span class="input-affix-wrapper">
                <BFormInput placeholder="input search text" />
                <span class="input-suffix"><i class="fa fa-microphone"></i></span>
            </span>
            <BButton variant="primary">Search</BButton>
        </BInputGroup>
    </BCol>
</template>

<div class="input-group mb-3">
	<span class="input-group-text" id="basic-addon1">@</span>
	<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
	<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-3">
	<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
	<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
	<span class="input-group-text">$</span>
	<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
	<span class="input-group-text">.00</span>
</div>
<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="Username" aria-label="Username">
	<span class="input-group-text">@</span>
	<input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div>
<div class="input-group mb-3">
	<span class="input-group-text"><i class="fa fa-user"></i></span>
	<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
	<span class="input-group-text">With textarea</span>
	<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<div class="input-group mb-3">
	<span class="input-affix-wrapper">
		<span class="input-prefix"><i class="fa fa-user"></i></span>
		<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
	</span>
</div>
<div class="input-group mb-3">
	<span class="input-affix-wrapper">
		<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
		<span class="input-suffix"><i class="fa fa-user"></i></span>
	</span>
</div>
<div class="input-group mb-3">
	<span class="input-group-text">http://</span>
	<span class="input-affix-wrapper affix-wth-text">
		<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
		<span class="input-suffix">.com</span>
	</span>
</div>
<div class="input-group">
	<span class="input-affix-wrapper">
		<input type="text" class="form-control" placeholder="input search text" aria-label="Username" aria-describedby="basic-addon1">
		<span class="input-suffix"><i class="fa fa-microphone"></i></span>
	</span>
	<button class="btn btn-primary">Search</button>
</div>

Sizing

Add the relative form sizing classes to the InputGroup and contents within will automatically resize—no need for repeating the form control size classes on each element.

Small

Default

Large

<div class="input-group input-group-sm mb-3">
	<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
	<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>
<div class="input-group mb-3">
	<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
	<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group input-group-lg">
	<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
	<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>

<template>
    <div class="input-group input-group-sm mb-3">
        <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
        <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
    </div>
    <div class="input-group mb-3">
        <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
        <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
    </div>
    <div class="input-group input-group-lg">
        <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
        <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
    </div>
</template>

<template>
    <BCol>
        <BInputGroup prepend="Small" size="sm" class="mb-3">
            <BFormInput />
        </BInputGroup>
        <BInputGroup prepend="Default" class="mb-3">
            <BFormInput />
        </BInputGroup>
        <BInputGroup prepend="Large" size="lg">
            <BFormInput />
        </BInputGroup>
    </BCol>
</template>

<div class="input-group input-group-sm mb-3">
	<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
	<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>
<div class="input-group mb-3">
	<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
	<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group input-group-lg">
	<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
	<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>

Multiple inputs

While multiple inputs are supported visually, validation styles are only available for input groups with a single input.

First and last name

<div class="form-group">
	<div class="input-group">
		<span class="input-group-text">First and last name</span>
		<input type="text" aria-label="First name" class="form-control">
		<input type="text" aria-label="Last name" class="form-control">
	</div>
</div>

<div class="form-group">
	<div class="input-group">
		<span class="input-group-text">First and last name</span>
		<input type="text" aria-label="First name" class="form-control">
		<input type="text" aria-label="Last name" class="form-control">
	</div>
</div>

<template>
    <BCol>
        <BInputGroup class="mb-3">
            <BInputGroupText>$</BInputGroupText>
            <BInputGroupText>0.00</BInputGroupText>
            <BFormInput />
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BFormInput />
            <BInputGroupText>$</BInputGroupText>
            <BInputGroupText>0.00</BInputGroupText>
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BButton variant="outline-secondary">Button</BButton>
            <BFormInput />
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BFormInput placeholder="Recipient's username" />
            <BButton variant="outline-secondary">Button</BButton>
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BButton variant="outline-secondary">Button</BButton>
            <BButton variant="outline-secondary">Button</BButton>
            <BFormInput />
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BFormInput />
            <BButton variant="outline-secondary">Button</BButton>
            <BButton variant="outline-secondary">Button</BButton>
        </BInputGroup>
        <BInputGroup class="mb-3">
            <template #prepend>
                <BDropdown text="Dropdown" variant="outline-secondary">
                    <BDropdownItem>Action</BDropdownItem>
                    <BDropdownItem>Another action</BDropdownItem>
                    <BDropdownItem>Something else here</BDropdownItem>
                    <BDropdownDivider />
                    <BDropdownItem>Separated link</BDropdownItem>
                </BDropdown>
            </template>
            <BFormInput />
            <template #append>
                <BButton variant="outline-secondary">Button</BButton>
            </template>
        </BInputGroup>
        <BInputGroup class="mb-3">
            <template #prepend>
                <BDropdown split text="Action" variant="outline-secondary">
                    <BDropdownItem>Action</BDropdownItem>
                    <BDropdownItem>Another action</BDropdownItem>
                    <BDropdownItem>Something else here</BDropdownItem>
                    <BDropdownDivider />
                    <BDropdownItem>Separated link</BDropdownItem>
                </BDropdown>
            </template>
            <BFormInput />
            <template #append>
                <BButton variant="outline-secondary">Button</BButton>
            </template>
        </BInputGroup>
    </BCol>
</template>

<div class="form-group">
	<div class="input-group">
		<span class="input-group-text">First and last name</span>
		<input type="text" aria-label="First name" class="form-control">
		<input type="text" aria-label="Last name" class="form-control">
	</div>
</div>

Multiple addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

$0.00

<div class="input-group mb-3">
	<span class="input-group-text">$</span>
	<span class="input-group-text">0.00</span>
	<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>
<div class="input-group mb-3">
	<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
	<span class="input-group-text">$</span>
	<span class="input-group-text">0.00</span>
</div>
<div class="input-group mb-3">
	<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
	<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="Recipient's username" aria-describedby="button-addon2">
	<button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div>
<div class="input-group mb-3">
	<button class="btn btn-outline-secondary" type="button">Button</button>
	<button class="btn btn-outline-secondary" type="button">Button</button>
	<input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
</div>
<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
	<button class="btn btn-outline-secondary" type="button">Button</button>
	<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group mb-3">
	<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="#">Action</a></li>
		<li><a class="dropdown-item" href="#">Another action</a></li>
		<li><a class="dropdown-item" href="#">Something else here</a></li>
		<li><hr class="dropdown-divider"></li>
		<li><a class="dropdown-item" href="#">Separated link</a></li>
	</ul>
	<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
<div class="input-group">
	<button type="button" class="btn btn-outline-secondary">Action</button>
	<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
		<span class="visually-hidden">Toggle Dropdown</span>
	</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="#">Action</a></li>
		<li><a class="dropdown-item" href="#">Another action</a></li>
		<li><a class="dropdown-item" href="#">Something else here</a></li>
		<li><hr class="dropdown-divider"></li>
		<li><a class="dropdown-item" href="#">Separated link</a></li>
	</ul>
	<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>

<div class="input-group mb-3">
	<span class="input-group-text">$</span>
	<span class="input-group-text">0.00</span>
	<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>
<div class="input-group mb-3">
	<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
	<span class="input-group-text">$</span>
	<span class="input-group-text">0.00</span>
</div>
<div class="input-group mb-3">
	<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
	<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="Recipient's username" aria-describedby="button-addon2">
	<button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div>
<div class="input-group mb-3">
	<button class="btn btn-outline-secondary" type="button">Button</button>
	<button class="btn btn-outline-secondary" type="button">Button</button>
	<input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
</div>
<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
	<button class="btn btn-outline-secondary" type="button">Button</button>
	<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group mb-3">
	<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="#">Action</a></li>
		<li><a class="dropdown-item" href="#">Another action</a></li>
		<li><a class="dropdown-item" href="#">Something else here</a></li>
		<li><hr class="dropdown-divider"></li>
		<li><a class="dropdown-item" href="#">Separated link</a></li>
	</ul>
	<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
<div class="input-group">
	<button type="button" class="btn btn-outline-secondary">Action</button>
	<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
		<span class="visually-hidden">Toggle Dropdown</span>
	</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="#">Action</a></li>
		<li><a class="dropdown-item" href="#">Another action</a></li>
		<li><a class="dropdown-item" href="#">Something else here</a></li>
		<li><hr class="dropdown-divider"></li>
		<li><a class="dropdown-item" href="#">Separated link</a></li>
	</ul>
	<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>

<template>
    <BCol>
        <BInputGroup class="mb-3">
            <BInputGroupText>$</BInputGroupText>
            <BInputGroupText>0.00</BInputGroupText>
            <BFormInput />
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BFormInput />
            <BInputGroupText>$</BInputGroupText>
            <BInputGroupText>0.00</BInputGroupText>
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BButton variant="outline-secondary">Button</BButton>
            <BFormInput />
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BFormInput placeholder="Recipient's username" />
            <BButton variant="outline-secondary">Button</BButton>
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BButton variant="outline-secondary">Button</BButton>
            <BButton variant="outline-secondary">Button</BButton>
            <BFormInput />
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BFormInput />
            <BButton variant="outline-secondary">Button</BButton>
            <BButton variant="outline-secondary">Button</BButton>
        </BInputGroup>
        <BInputGroup class="mb-3">
            <template #prepend>
                <BDropdown text="Dropdown" variant="outline-secondary">
                    <BDropdownItem>Action</BDropdownItem>
                    <BDropdownItem>Another action</BDropdownItem>
                    <BDropdownItem>Something else here</BDropdownItem>
                    <BDropdownDivider />
                    <BDropdownItem>Separated link</BDropdownItem>
                </BDropdown>
            </template>
            <BFormInput />
            <template #append>
                <BButton variant="outline-secondary">Button</BButton>
            </template>
        </BInputGroup>
        <BInputGroup class="mb-3">
            <template #prepend>
                <BDropdown split text="Action" variant="outline-secondary">
                    <BDropdownItem>Action</BDropdownItem>
                    <BDropdownItem>Another action</BDropdownItem>
                    <BDropdownItem>Something else here</BDropdownItem>
                    <BDropdownDivider />
                    <BDropdownItem>Separated link</BDropdownItem>
                </BDropdown>
            </template>
            <BFormInput />
            <template #append>
                <BButton variant="outline-secondary">Button</BButton>
            </template>
        </BInputGroup>
    </BCol>
</template>

<div class="input-group mb-3">
	<span class="input-group-text">$</span>
	<span class="input-group-text">0.00</span>
	<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>
<div class="input-group mb-3">
	<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
	<span class="input-group-text">$</span>
	<span class="input-group-text">0.00</span>
</div>
<div class="input-group mb-3">
	<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
	<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="Recipient's username" aria-describedby="button-addon2">
	<button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div>
<div class="input-group mb-3">
	<button class="btn btn-outline-secondary" type="button">Button</button>
	<button class="btn btn-outline-secondary" type="button">Button</button>
	<input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
</div>
<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
	<button class="btn btn-outline-secondary" type="button">Button</button>
	<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group mb-3">
	<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="#">Action</a></li>
		<li><a class="dropdown-item" href="#">Another action</a></li>
		<li><a class="dropdown-item" href="#">Something else here</a></li>
		<li><hr class="dropdown-divider"></li>
		<li><a class="dropdown-item" href="#">Separated link</a></li>
	</ul>
	<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
<div class="input-group">
	<button type="button" class="btn btn-outline-secondary">Action</button>
	<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
		<span class="visually-hidden">Toggle Dropdown</span>
	</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="#">Action</a></li>
		<li><a class="dropdown-item" href="#">Another action</a></li>
		<li><a class="dropdown-item" href="#">Something else here</a></li>
		<li><hr class="dropdown-divider"></li>
		<li><a class="dropdown-item" href="#">Separated link</a></li>
	</ul>
	<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>

Custom forms

Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.

Options

Upload

<div class="input-group mb-3">
	<label class="input-group-text" for="inputGroupSelect01">Options</label>
	<select class="form-select" id="inputGroupSelect01">
		<option selected>Choose...</option>
		<option value="1">One</option>
		<option value="2">Two</option>
		<option value="3">Three</option>
	</select>
</div>
<div class="input-group mb-3">
	<select class="form-select" id="inputGroupSelect02">
		<option selected>Choose...</option>
		<option value="1">One</option>
		<option value="2">Two</option>
		<option value="3">Three</option>
	</select>
	<label class="input-group-text" for="inputGroupSelect02">Options</label>
</div>
<div class="input-group mb-3">
	<button class="btn btn-outline-secondary" type="button">Button</button>
	<select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
		<option selected>Choose...</option>
		<option value="1">One</option>
		<option value="2">Two</option>
		<option value="3">Three</option>
	</select>
</div>
<div class="input-group mb-3">
	<select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
		<option selected>Choose...</option>
		<option value="1">One</option>
		<option value="2">Two</option>
		<option value="3">Three</option>
	</select>
	<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group mb-3">
	<label class="input-group-text" for="inputGroupFile01">Upload</label>
	<input type="file" class="form-control" id="inputGroupFile01">
</div>
<div class="input-group mb-3">
	<input type="file" class="form-control" id="inputGroupFile02">
	<label class="input-group-text" for="inputGroupFile02">Upload</label>
</div>
<div class="input-group mb-3">
	<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
	<input type="file" class="form-control" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload">
</div>
<div class="input-group">
	<input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload">
	<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>

<template>
    <BCol>
        <BInputGroup prepend="Options" class="mb-3">
            <BFormSelect id="inputGroupSelect01" model-value="selected">
                <BFormSelectOption value="selected">Choose..</BFormSelectOption>
                <BFormSelectOption value="1">One</BFormSelectOption>
                <BFormSelectOption value="2">Two</BFormSelectOption>
                <BFormSelectOption value="3">Three</BFormSelectOption>
            </BFormSelect>
        </BInputGroup>
        <BInputGroup append="Options" class="mb-3">
            <BFormSelect id="inputGroupSelect02" model-value="selected">
                <BFormSelectOption value="selected">Choose..</BFormSelectOption>
                <BFormSelectOption value="1">One</BFormSelectOption>
                <BFormSelectOption value="2">Two</BFormSelectOption>
                <BFormSelectOption value="3">Three</BFormSelectOption>
            </BFormSelect>
        </BInputGroup>
        <BInputGroup class="mb-3">
            <template #prepend>
                <BButton variant="outline-secondary">Button</BButton>
            </template>
            <BFormSelect id="inputGroupSelect03" model-value="selected">
                <BFormSelectOption value="selected">Choose..</BFormSelectOption>
                <BFormSelectOption value="1">One</BFormSelectOption>
                <BFormSelectOption value="2">Two</BFormSelectOption>
                <BFormSelectOption value="3">Three</BFormSelectOption>
            </BFormSelect>
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BFormSelect id="inputGroupSelect04" model-value="selected">
                <BFormSelectOption value="selected">Choose..</BFormSelectOption>
                <BFormSelectOption value="1">One</BFormSelectOption>
                <BFormSelectOption value="2">Two</BFormSelectOption>
                <BFormSelectOption value="3">Three</BFormSelectOption>
            </BFormSelect>
            <template #append>
                <BButton variant="outline-secondary">Button</BButton>
            </template>
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BInputGroupText tag="label" for="inputGroupFile01">Upload</BInputGroupText>
            <BFormFile id="inputGroupFile01" />
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BFormFile id="inputGroupFile02" />
            <BInputGroupText tag="label" for="inputGroupFile02">Upload</BInputGroupText>
        </BInputGroup>
        <BInputGroup class="mb-3">
            <template #prepend>
                <BButton variant="outline-secondary">Button</BButton>
            </template>
            <BFormFile id="inputGroupFile03" />
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BFormFile id="inputGroupFile04" />
            <template #append>
                <BButton variant="outline-secondary">Button</BButton>
            </template>
        </BInputGroup>
    </BCol>
</template>

<template>
    <BCol>
        <BInputGroup prepend="Options" class="mb-3">
            <BFormSelect id="inputGroupSelect01" model-value="selected">
                <BFormSelectOption value="selected">Choose..</BFormSelectOption>
                <BFormSelectOption value="1">One</BFormSelectOption>
                <BFormSelectOption value="2">Two</BFormSelectOption>
                <BFormSelectOption value="3">Three</BFormSelectOption>
            </BFormSelect>
        </BInputGroup>
        <BInputGroup append="Options" class="mb-3">
            <BFormSelect id="inputGroupSelect02" model-value="selected">
                <BFormSelectOption value="selected">Choose..</BFormSelectOption>
                <BFormSelectOption value="1">One</BFormSelectOption>
                <BFormSelectOption value="2">Two</BFormSelectOption>
                <BFormSelectOption value="3">Three</BFormSelectOption>
            </BFormSelect>
        </BInputGroup>
        <BInputGroup class="mb-3">
            <template #prepend>
                <BButton variant="outline-secondary">Button</BButton>
            </template>
            <BFormSelect id="inputGroupSelect03" model-value="selected">
                <BFormSelectOption value="selected">Choose..</BFormSelectOption>
                <BFormSelectOption value="1">One</BFormSelectOption>
                <BFormSelectOption value="2">Two</BFormSelectOption>
                <BFormSelectOption value="3">Three</BFormSelectOption>
            </BFormSelect>
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BFormSelect id="inputGroupSelect04" model-value="selected">
                <BFormSelectOption value="selected">Choose..</BFormSelectOption>
                <BFormSelectOption value="1">One</BFormSelectOption>
                <BFormSelectOption value="2">Two</BFormSelectOption>
                <BFormSelectOption value="3">Three</BFormSelectOption>
            </BFormSelect>
            <template #append>
                <BButton variant="outline-secondary">Button</BButton>
            </template>
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BInputGroupText tag="label" for="inputGroupFile01">Upload</BInputGroupText>
            <BFormFile id="inputGroupFile01" />
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BFormFile id="inputGroupFile02" />
            <BInputGroupText tag="label" for="inputGroupFile02">Upload</BInputGroupText>
        </BInputGroup>
        <BInputGroup class="mb-3">
            <template #prepend>
                <BButton variant="outline-secondary">Button</BButton>
            </template>
            <BFormFile id="inputGroupFile03" />
        </BInputGroup>
        <BInputGroup class="mb-3">
            <BFormFile id="inputGroupFile04" />
            <template #append>
                <BButton variant="outline-secondary">Button</BButton>
            </template>
        </BInputGroup>
    </BCol>
</template>

<div class="input-group mb-3">
	<label class="input-group-text" for="inputGroupSelect01">Options</label>
	<select class="form-select" id="inputGroupSelect01">
		<option selected>Choose...</option>
		<option value="1">One</option>
		<option value="2">Two</option>
		<option value="3">Three</option>
	</select>
</div>
<div class="input-group mb-3">
	<select class="form-select" id="inputGroupSelect02">
		<option selected>Choose...</option>
		<option value="1">One</option>
		<option value="2">Two</option>
		<option value="3">Three</option>
	</select>
	<label class="input-group-text" for="inputGroupSelect02">Options</label>
</div>
<div class="input-group mb-3">
	<button class="btn btn-outline-secondary" type="button">Button</button>
	<select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
		<option selected>Choose...</option>
		<option value="1">One</option>
		<option value="2">Two</option>
		<option value="3">Three</option>
	</select>
</div>
<div class="input-group mb-3">
	<select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
		<option selected>Choose...</option>
		<option value="1">One</option>
		<option value="2">Two</option>
		<option value="3">Three</option>
	</select>
	<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group mb-3">
	<label class="input-group-text" for="inputGroupFile01">Upload</label>
	<input type="file" class="form-control" id="inputGroupFile01">
</div>
<div class="input-group mb-3">
	<input type="file" class="form-control" id="inputGroupFile02">
	<label class="input-group-text" for="inputGroupFile02">Upload</label>
</div>
<div class="input-group mb-3">
	<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
	<input type="file" class="form-control" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload">
</div>
<div class="input-group">
	<input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload">
	<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>

Basic Example
Sizing
Multiple inputs
Multiple addons
Custom forms