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 #
<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>
<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>
<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>
<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.