Package org.patternfly.component.inputgroup

package org.patternfly.component.inputgroup
Provides input group components for combining form controls with text, icons, or buttons.

This package contains the InputGroup component and its sub-components for grouping a text input or text area with supplementary elements such as static text, icons, buttons, or dropdowns. Input groups visually connect related controls into a single composite input.

Components

  • InputGroup - Container that groups input controls together
  • InputGroupItem - Wraps an individual item (control, button, or dropdown)
  • InputGroupText - Displays static text or an icon alongside the input

Usage

An input group with a text input and a static text suffix: 

import static org.patternfly.component.button.Button.button;
import static org.patternfly.component.form.TextInput.textInput;
import static org.patternfly.component.inputgroup.InputGroup.inputGroup;
import static org.patternfly.component.inputgroup.InputGroupItem.inputGroupItem;
import static org.patternfly.component.inputgroup.InputGroupText.inputGroupText;
import static org.patternfly.icon.IconSets.fas.at;

// Input with text suffix
InputGroup emailInput = inputGroup()
        .addItem(inputGroupItem().fill()
                .addControl(textInput("email")))
        .addText(inputGroupText("@example.com"));

// Input with icon prefix and button
InputGroup searchInput = inputGroup()
        .addText(inputGroupText().icon(at()))
        .addItem(inputGroupItem().fill()
                .addControl(textInput("search")))
        .addItem(inputGroupItem()
                .addButton(button("Search").control()));
See Also:
  • Classes
    Class
    Description
    InputGroup
    An input group groups multiple related controls or inputs together, so they appear as one control.
    InputGroupItem
     
    InputGroupText