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="example-dropdown">
      <button type="button" class="rvt-button" data-rvt-dropdown-toggle>
        <span class="rvt-dropdown__toggle-text">Search everything</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="m15.146 6.263-1.292-1.526L8 9.69 2.146 4.737.854 6.263 8 12.31l7.146-6.047Z"/></svg>
      </button>
      <div class="rvt-dropdown__menu" data-rvt-dropdown-menu hidden>
        <button type="button" aria-checked="true" role="menuitemradio">
          <span>Search everything</span>
        </button>
        <button type="button" role="menuitemradio">
          <span>Search people</span>
        </button>
        <button type="button" role="menuitemradio">
          <span>Search services</span>
        </button>
      </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.