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.

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.

@example.com

Your vanity URL

https://example.com/users/

$.00

With textarea

http://.com

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

Sizing

Set height using the size prop to sm or lg for small or large respectively. There is no need to set size on the individual inputs or buttons.

Small

Default

Large

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

Multiple inputs

Add two or more inputs in an input group.

First and last name

							
                                
<BInputGroup prepend="First and last name">
    <BFormInput aria-label="First name" />
    <BFormInput aria-label="Last name" />
</BInputGroup>

Multiple addons

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

0.00

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

Custom forms

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

Options

Upload

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

Basic Example
Sizing
Multiple inputs
Multiple addons
Custom forms