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 fill="currentColor" width="16" height="16" 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"></path></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.