Input Group

Combine inputs with add-ons like buttons, icons, or text labels.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

import {
  InputGroup,
  InputGroupAddon,
  InputGroupText
} from "components/selia/input-group";

Structure

The expected structure and composition of the component.

<InputGroup>
  <InputGroupAddon>
    <InputGroupText />
  </InputGroupAddon>
</InputGroup>

Props

Each component part, its responsibility, and the props it exposes.

Examples

Icon

Add an icon to the input group by using the InputGroupAddon component.

Label

Use the render={<label />} prop to add an addon that acts as a label.

Menu

Add a menu to the input group.

Select

You can also add a select alongside the input.

Button

Add a button to the input group.

Textarea

Textarea is a bit different; instead of using the InputGroupAddon component, you need to use the InputGroupBar component.