Input groups

Attach text, buttons, checkboxes, radios, selects, file inputs, and multiple controls to form inputs.

Basic example

Place one add-on or button on either side of an input. Input groups wrap by default with flex-wrap: wrap so validation feedback can sit on its own line.

@
@example.com
https://example.com/users/
$ .00
@
aspnet 

<bs-input-group bottom-margin="Default3">
    <bs-input-group-text>@@</bs-input-group-text>
    <bs-input placeholder-text="Username" aria-label="Username" />
</bs-input-group>
<bs-input-group bottom-margin="Default3">
    <bs-input placeholder-text="Recipient username" aria-label="Recipient username" />
    <bs-input-group-text>@@example.com</bs-input-group-text>
</bs-input-group>
<bs-input-group bottom-margin="Default3">
    <bs-input-group-text>https://example.com/users/</bs-input-group-text>
    <bs-input placeholder-text="Handle" aria-label="Handle" />
</bs-input-group>
<bs-input-group bottom-margin="Default3">
    <bs-input-group-text>$</bs-input-group-text>
    <bs-input placeholder-text="Amount" aria-label="Amount" />
    <bs-input-group-text>.00</bs-input-group-text>
</bs-input-group>
<bs-input-group>
    <bs-input placeholder-text="Username" aria-label="Username" />
    <bs-input-group-text>@@</bs-input-group-text>
    <bs-input placeholder-text="Server" aria-label="Server" />
</bs-input-group>

Wrapping

Input groups use Bootstrap's default wrapping behavior. Add flex-nowrap when a prefix and input must stay on one line.

@
aspnet 

<bs-input-group flex-wrap="NoWrap">
    <bs-input-group-text>@@</bs-input-group-text>
    <bs-input placeholder-text="Username" aria-label="Username" />
</bs-input-group>

Border radius

Input groups rely on Bootstrap's sibling ordering to manage border radius. Keep add-ons, buttons, and controls as direct children of bs-input-group so the generated structure can apply the correct rounded corners.

Sizing

Set the size on the input group. Children inherit the matching control sizing from Bootstrap.

Small
Default
Large
aspnet 

<bs-input-group input-group-size="Small" bottom-margin="Default3">
    <bs-input-group-text>Small</bs-input-group-text>
    <bs-input aria-label="Small input group" />
</bs-input-group>
<bs-input-group bottom-margin="Default3">
    <bs-input-group-text>Default</bs-input-group-text>
    <bs-input aria-label="Default input group" />
</bs-input-group>
<bs-input-group input-group-size="Large">
    <bs-input-group-text>Large</bs-input-group-text>
    <bs-input aria-label="Large input group" />
</bs-input-group>

Checkboxes and radios

Use input-group check and radio helpers when a compact selection control belongs directly beside a text input.

aspnet 

<bs-input-group bottom-margin="Default3">
    <bs-input-group-check />
    <bs-input aria-label="Text input with checkbox" />
</bs-input-group>
<bs-input-group>
    <bs-input-group-radio name="inputGroupRadio" />
    <bs-input aria-label="Text input with radio button" />
</bs-input-group>

Multiple inputs

Multiple controls can share one input group. Use clear labels because screen readers do not infer labels from visual add-ons alone.

First and last name
aspnet 

<bs-input-group bottom-margin="Default3">
    <bs-input-group-text>First and last name</bs-input-group-text>
    <bs-input aria-label="First name" />
    <bs-input aria-label="Last name" />
</bs-input-group>

Multiple addons

Input groups can include more than one add-on before or after a control. Keep the add-on text short so the input remains usable on narrow screens.

$ 0.00
aspnet 

<bs-input-group>
    <bs-input-group-text>$</bs-input-group-text>
    <bs-input-group-text>0.00</bs-input-group-text>
    <bs-input aria-label="Dollar amount" />
</bs-input-group>

Button addons

Buttons can sit before or after an input when the action directly applies to that input value.

aspnet 

<bs-input-group bottom-margin="Default3">
    <bs-button btn-style="Secondary" outline="true">Button</bs-button>
    <bs-input placeholder-text="Button addon" aria-label="Button addon input" />
</bs-input-group>
<bs-input-group bottom-margin="Default3">
    <bs-input placeholder-text="Recipient username" aria-label="Recipient username" />
    <bs-button btn-style="Secondary" outline="true">Button</bs-button>
</bs-input-group>
<bs-input-group>
    <bs-button btn-style="Secondary" outline="true">Button</bs-button>
    <bs-button btn-style="Secondary" outline="true">Button</bs-button>
    <bs-input placeholder-text="Two button addons" aria-label="Two button addons" />
</bs-input-group>

Buttons with dropdowns

bs-dropdown can be placed alongside inputs when the input group needs a menu action. Split dropdowns are also supported.

aspnet 

<bs-input-group bottom-margin="Default3">
    <bs-dropdown btn-style="Secondary" data-bs-theme="light">
        Dropdown
        <bs-dropdown-menu>
            <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
            <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
            <bs-dropdown-menu-divider />
            <bs-dropdown-menu-item href="#">Separated link</bs-dropdown-menu-item>
        </bs-dropdown-menu>
    </bs-dropdown>
    <bs-input aria-label="Text input with dropdown button" />
</bs-input-group>
<bs-input-group>
    <bs-input aria-label="Text input with segmented dropdown button" />
    <bs-dropdown is-split="true" btn-style="Secondary">
        Action
        <bs-split-button>
            <bs-span screen-reader-visibility="VisuallyHidden">Toggle Dropdown</bs-span>
        </bs-split-button>
        <bs-dropdown-menu>
            <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
            <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
            <bs-dropdown-menu-divider />
            <bs-dropdown-menu-item href="#">Separated link</bs-dropdown-menu-item>
        </bs-dropdown-menu>
    </bs-dropdown>
</bs-input-group>

Segmented buttons

Use bs-dropdown with is-split="true" inside an input group for segmented dropdown buttons.

aspnet 

<bs-input-group>
    <bs-input aria-label="Text input with segmented dropdown button" />
    <bs-dropdown is-split="true" btn-style="Secondary">
        Action
        <bs-split-button>
            <bs-span screen-reader-visibility="VisuallyHidden">Toggle Dropdown</bs-span>
        </bs-split-button>
        <bs-dropdown-menu>
            <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
            <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
            <bs-dropdown-menu-divider />
            <bs-dropdown-menu-item href="#">Separated link</bs-dropdown-menu-item>
        </bs-dropdown-menu>
    </bs-dropdown>
</bs-input-group>

Custom forms

Input groups support custom selects, file inputs, textareas, and validation feedback through existing form helpers.

Options
Upload
With textarea
aspnet 

<bs-input-group bottom-margin="Default3">
    <bs-input-group-text>Options</bs-input-group-text>
    <bs-select aria-label="Select example">
        <bs-option value="">Choose...</bs-option>
        <bs-option value="1">One</bs-option>
        <bs-option value="2">Two</bs-option>
        <bs-option value="3">Three</bs-option>
    </bs-select>
</bs-input-group>
<bs-input-group bottom-margin="Default3">
    <bs-input-group-text>Upload</bs-input-group-text>
    <bs-input input-type="File" aria-label="Upload" />
</bs-input-group>
<bs-input-group>
    <bs-input-group-text>With textarea</bs-input-group-text>
    <bs-textarea placeholder-text="Textarea" aria-label="Textarea"></bs-textarea>
</bs-input-group>

Custom select

Select controls can be paired with an input-group label add-on when the select needs a compact inline descriptor.

Options
aspnet 

<bs-input-group>
    <bs-input-group-text>Options</bs-input-group-text>
    <bs-select aria-label="Select example">
        <bs-option value="">Choose...</bs-option>
        <bs-option value="1">One</bs-option>
        <bs-option value="2">Two</bs-option>
        <bs-option value="3">Three</bs-option>
    </bs-select>
</bs-input-group>

Custom file input

File inputs can share the same input-group structure as text inputs and selects.

Upload
aspnet 

<bs-input-group>
    <bs-input-group-text>Upload</bs-input-group-text>
    <bs-input input-type="File" aria-label="Upload" />
</bs-input-group>

Validation

When validation feedback is placed inside the input group, Bootstrap wrapping lets the feedback occupy the full width below the controls.

@ Choose a username.
aspnet 

<bs-form was-validated="true">
    <bs-input-group>
        <bs-input-group-text>@@</bs-input-group-text>
        <bs-input placeholder-text="Username" aria-label="Username" required="true" />
        <bs-validation-message>Choose a username.</bs-validation-message>
    </bs-input-group>
</bs-form>