Input group

Group related form inputs

Overview #

Use the input group component to group form fields with related buttons or text labels. Buttons and text labels can be prepended or appended to the form field.

Examples #

Choose an example

Open in new window Copy link to example

<label for="search" class="rvt-label rvt-sr-only">Search</label>
<div class="rvt-input-group">
  <input class="rvt-text-input rvt-input-group__input" type="text" id="search">
  <div class="rvt-input-group__append">
    <button type="button" class="rvt-button">
    <span>Search docs</span>
    </button>
  </div>
</div>

Open in new window Copy link to example

<label for="segmented-prepend" class="rvt-label rvt-sr-only">Add new</label>
<div class="rvt-input-group">
  <div class="rvt-input-group__prepend">
    <div class="rvt-dropdown" data-rvt-dropdown="dropdownNavigation">
      <button type="button" class="rvt-button rvt-button--secondary" data-rvt-dropdown-toggle="dropdownNavigation" aria-haspopup="true" aria-expanded="false">
        <span class="rvt-dropdown__toggle-text">All stuff</span>
        <svg aria-hidden="true" class="rvt-m-left-xs" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
          <path fill="currentColor" d="M8,12.46a2,2,0,0,1-1.52-.7L1.24,5.65a1,1,0,1,1,1.52-1.3L8,10.46l5.24-6.11a1,1,0,0,1,1.52,1.3L9.52,11.76A2,2,0,0,1,8,12.46Z" />
        </svg>
      </button>
      <div class="rvt-dropdown__menu" id="dropdownNavigation" role="menu" hidden data-rvt-dropdown-menu>
        <a href="#">Item one</a>
        <a href="#">Item two</a>
        <a href="#" aria-current="page">Item three</a>
        <div role="group" aria-label="Related">
          <a href="#">Related item one</a>
          <a href="#">Related item two</a>
        </div>
      </div>
    </div>
  </div>
  <input class="rvt-text-input rvt-input-group__input" type="text" id="segmented-prepend">
</div>

Open in new window Copy link to example

<label for="text-append-example">Email address</label>
<div class="rvt-input-group">
  <input class="rvt-text-input rvt-input-group__input" type="text" id="text-append-example" aria-describedby="email-text">
  <div class="rvt-input-group__append">
    <div class="rvt-input-group__text" id="email-text">@iu.edu</div>
  </div>
</div>

Open in new window Copy link to example

<label for="text-prepend-example" class="rvt-sr-only">Website</label>
<div class="rvt-input-group">
  <div class="rvt-input-group__prepend">
    <div class="rvt-input-group__text" id="website-text">https://</div>
  </div>
  <input class="rvt-text-input rvt-input-group__input" type="text" id="text-prepend-example" aria-describedby="website-text">
</div>

Usage #

Form field labels must be outside the input group. A form field’s associated label element must be outside the element with the .rvt-input-group class. See the code examples on this page for guidance.

Do

Use to group an input with its associated action, like search
Use to help a user better understand what type of data they should enter into a field, such as a URL

Don't

Put more than a few words in a grouped text label
Use grouped text labels as replacements for native label elements

Accessibility #

Always use native form field labels in addition to grouped text labels. If you want to hide a native label element in an accessible way, use the .rvt-sr-only utility class. See the code examples on this page for guidance.