Skip to main content
bootstrap-ng

Search the docs

Input group

Text, buttons and menus attached to either side of a form control.

Bootstrap’s input group docs describe the markup and CSS.

Example

Put bsInputGroupText add-ons on either side of a bsFormControl in a bsInputGroup. Keep labels outside the group, and give inputs without a visible label an aria-label.

@
@example.com
$.00
HTML
<div class="vstack gap-3">
  <div bsInputGroup>
    <span bsInputGroupText>&#64;</span>
    <input bsFormControl placeholder="Username" aria-label="Username" />
  </div>
  <div bsInputGroup>
    <input bsFormControl placeholder="Recipient’s username" aria-label="Recipient’s username" />
    <span bsInputGroupText>&#64;example.com</span>
  </div>
  <div bsInputGroup>
    <span bsInputGroupText>$</span>
    <input bsFormControl aria-label="Amount (to the nearest dollar)" />
    <span bsInputGroupText>.00</span>
  </div>
</div>

With form field

Put the group in a bsFormField for a label, help text and feedback. Feedback goes after the group, not inside it.

https://example.com/
Choose a unique URL for your profile.
Please choose a username.
<div bsFormField>
  <label bsFormLabel>Your vanity URL</label>
  <div bsInputGroup>
    <span bsInputGroupText>https://example.com/</span>
    <input bsFormControl placeholder="username" [formControl]="username" />
  </div>
  <small bsFormText>Choose a unique URL for your profile.</small>
  <div bsInvalidFeedback>Please choose a username.</div>
</div>

Buttons

Use buttons with .input-group-btn for actions.

HTML
<div class="vstack gap-3">
  <div bsInputGroup>
    <button type="button" bsButton="outline" theme="secondary" class="input-group-btn">
      Button
    </button>
    <input bsFormControl aria-label="Example text with button addon" />
  </div>
  <div bsInputGroup>
    <input
      bsFormControl
      placeholder="Recipient’s username"
      aria-label="Recipient’s username with two button addons" />
    <button type="button" bsButton="outline" theme="secondary" class="input-group-btn">
      Button
    </button>
    <button type="button" bsButton="outline" theme="secondary" class="input-group-btn">
      Button
    </button>
  </div>
</div>

Combine buttons with a menu.

HTML
<div class="vstack gap-3">
  <div bsInputGroup>
    <button
      type="button"
      bsButton="outline"
      theme="secondary"
      class="input-group-btn"
      [bsMenuToggle]="before">
      Menu
    </button>
    <div bsMenu #before="bsMenu">
      <button type="button" class="menu-item">Action</button>
      <button type="button" class="menu-item">Another action</button>
      <hr class="menu-divider" />
      <button type="button" class="menu-item">Separated action</button>
    </div>
    <input bsFormControl aria-label="Text input with menu button" />
  </div>
  <div bsInputGroup>
    <input bsFormControl aria-label="Text input with menu button at the end" />
    <button
      type="button"
      bsButton="outline"
      theme="secondary"
      class="input-group-btn"
      [bsMenuToggle]="after">
      Menu
    </button>
    <div bsMenu #after="bsMenu" placement="bottom-end">
      <button type="button" class="menu-item">Action</button>
      <button type="button" class="menu-item">Another action</button>
    </div>
  </div>
</div>

Textarea, select and file

Groups adapt to textareas, and work with selects and file inputs. A <label> can be the add-on.

With textarea
HTML
<div class="vstack gap-3">
  <div bsInputGroup>
    <span bsInputGroupText>With textarea</span>
    <textarea bsFormControl aria-label="With textarea"></textarea>
  </div>
  <div bsInputGroup>
    <label bsInputGroupText for="inputGroupSelect">Options</label>
    <select bsFormControl id="inputGroupSelect">
      <option selected>Choose…</option>
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
  </div>
  <div bsInputGroup>
    <input type="file" bsFormControl id="inputGroupFile" />
    <label bsInputGroupText for="inputGroupFile">Upload</label>
  </div>
</div>

Checkboxes and radios

Put a checkbox or radio in an add-on instead of text.

HTML
<div class="vstack gap-3">
  <div bsInputGroup>
    <div bsInputGroupText>
      <input type="checkbox" bsCheck aria-label="Checkbox for following text input" />
    </div>
    <input bsFormControl aria-label="Text input with checkbox" />
  </div>
  <div bsInputGroup>
    <div bsInputGroupText>
      <input type="radio" bsRadio aria-label="Radio for following text input" />
    </div>
    <input bsFormControl aria-label="Text input with radio" />
  </div>
</div>

Multiple inputs

Groups can hold several inputs, but validation styles only work with one.

First and last name
HTML
<div bsInputGroup>
  <span bsInputGroupText>First and last name</span>
  <input bsFormControl aria-label="First name" autocomplete="given-name" />
  <input bsFormControl aria-label="Last name" autocomplete="family-name" />
</div>

Sizing

Set size on the group to sm or lg. Everything inside resizes.

Small
Default
Large
HTML
<div class="vstack gap-3">
  <div bsInputGroup size="sm">
    <span bsInputGroupText>Small</span>
    <input bsFormControl aria-label="Small example input" />
  </div>
  <div bsInputGroup>
    <span bsInputGroupText>Default</span>
    <input bsFormControl aria-label="Default example input" />
  </div>
  <div bsInputGroup size="lg">
    <span bsInputGroupText>Large</span>
    <input bsFormControl aria-label="Large example input" />
  </div>
</div>

API

BsInputGroup

Selector: [bsInputGroup]

Inputs

NameTypeDefaultDescription
size'sm' | 'md' | 'lg''md'Size of everything in the group.

BsInputGroupText

Selector: [bsInputGroupText]