PF Next

Input Group

Inputgroup Example

Preview







.00


@example.com








<div class="pf-c-input-group">
  <button class="pf-c-button pf-m-secondary" id="textAreaButton1">
    Button
  </button>
  <textarea class="pf-c-form-control" name="textarea1" id="textarea1" aria-label="textarea with buttons" aria-describedby="textAreaButton1"></textarea>
  <button class="pf-c-button pf-m-tertiary">
    Button
  </button>
</div>
<br>
<br>
<div class="pf-c-input-group">
  <textarea class="pf-c-form-control" name="textarea2" id="textarea2" aria-label="textarea with button" aria-describedby="textAreaButton2"></textarea>
  <button class="pf-c-button pf-m-tertiary" id="textAreaButton2">
    Button
  </button>
</div>
<br>
<br>
<div class="pf-c-input-group">
  <div class="pf-c-dropdown">
    <button id="dropdown-example-collapsed1-button" class="pf-c-dropdown__toggle" aria-expanded="false">
      Dropdown
      <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
    </button>
    <div class="pf-c-dropdown__menu" hidden>
      Dropdown
    </div>
  </div>
  <input class="pf-c-form-control" input="true" type="text" id="textInput3" name="textInput3" aria-label="input with dropdown and button" aria-describedby="inputDropdownButton1"></input>
  <button class="pf-c-button pf-m-secondary" id="inputDropdownButton1">
    Button
  </button>
</div>
<br>
<br>
<div class="pf-c-input-group">
  <span class="pf-c-input-group__text">
  		 <i class="fas fa-dollar-sign" aria-hidden="true"></i></span>
  <input class="pf-c-form-control" input="true" type="number" id="textInput5" name="textInput5" aria-label=" Dollar amount input example"></input>
  <span class="pf-c-input-group__text">
  	   .00
  </span></div>
<br>
<br>
<div class="pf-c-input-group">
  <input class="pf-c-form-control" input="true" type="email" id="textInput6" name="textInput6" aria-label="email input field" aria-describedby="email-example"></input>
  <span class="pf-c-input-group__text" id="email-example">
  	   @example.com
  </span></div>
<br>
<br>
<div class="pf-c-input-group">
  <span class="pf-c-input-group__text" aria-label="@" id="username">
  		<i class="fas fa-at" aria-hidden="true"></i></span>
  <input class="pf-c-form-control" required input="true" type="email" id="textInput7" name="textInput7" aria-invalid="true" aria-label="Error state username example" aria-describedby="username"></input>
</div>
<br>
<br>
<div class="pf-c-input-group">
  <label class="pf-c-input-group__text" for="textInput9">
    <i class="fas fa-calendar-alt" aria-hidden="true"></i>
  </label>
  <input class="pf-c-form-control" input="true" type="date" id="textInput9" name="textInput9" aria-label="Date input example"></input>
</div>
<br>
<br>
<div class="pf-c-input-group">
  <input class="pf-c-form-control" input="true" type="search" id="textInput11" name="textInput11" aria-label="search input example"></input>
  <button class="pf-c-button pf-m-tertiary" aria-label="search button for search input">
    <i class="fas fa-search" aria-hidden="true"></i>
  </button>
</div>
<br>
<br>
<div class="pf-c-input-group">
  <input class="pf-c-form-control" input="true" type="text" id="textInput10" name="textInput10" aria-label="input example with popover"></input>
  <button class="pf-c-button pf-m-tertiary" aria-label="popover for input">
    <i class="fas fa-question-circle" aria-hidden="true"></i>
  </button>
</div>

Documentation

Overview

Use the input group to extend form controls by adding text, buttons, dropdowns, etc.

Accessibility

When using the pf-c-input-group always ensure labels are used outside the input group with the .pf-u-sr-only class applied. You can also make use of the aria-describedby, aria-label, or aria-labelledby attributues. For more information on accessibility and forms see the form component.

Attribute Applied To Outcome
aria-describedby pf-c-form-control When using .pf-c-input-group__text or .pf-c-input-group__action make use of this on the input field.

Usage

Class Applied To Outcome
.pf-c-input-group <div> Iniaties the input group. Required
.pf-c-input-group__text <span> Iniaties the input group text. This can be used to show text, radio, icons, or check boxes.