InputGroup

Input group is used for collecting data entered by users. It usually contains buttons, text areas or other inputs. With this component, your forms are attractive and easy to customize.

Basic input with appended text after

Default InputGroup example.

import React from "react";
import { CDBInputGroup, CDBContainer } from "cdbreact";
const InputGroup = () => {
  return (
    <CDBContainer>
            <CDBInputGroup
              hint="Recipient's username"
              containerClassName="mb-3 mt-0"
              append="@example.com"
            />
    </CDBContainer>
  );
};
export default  InputGroup;

Basic input with appended text before

import React from "react";
import { CDBInputGroup, CDBContainer } from "cdbreact";
const InputGroup = () => {
  return (
    <CDBContainer>
            <CDBInputGroup
              containerClassName="flex-nowrap mb-3"
              prepend="@"
              hint="Username"
            />
    </CDBContainer>
  );
};
export default  InputGroup;

Run function on icon click

import React from "react";
import { CDBInputGroup, CDBContainer } from "cdbreact";
const InputGroup = () => {
  return (
    <CDBContainer>
            <CDBInputGroup
              icon="bell"
              onIconClick={() => alert("Wait! This is an alert!")}
            />
    </CDBContainer>
  );
};
export default  InputGroup;

Small input group

import React from "react";
import { CDBInputGroup, CDBContainer } from "cdbreact";
const InputGroup = () => {
  return (
    <CDBContainer>
            <CDBInputGroup
              containerClassName="mb-2 mt-0"
              prepend="Small"
              size="sm"
            />
    </CDBContainer>
  );
};
export default  InputGroup;

Large input group

import React from "react";
import { CDBInputGroup, CDBContainer } from "cdbreact";
const InputGroup = () => {
  return (
    <CDBContainer>
            <CDBInputGroup
              containerClassName="mb-2 mt-0"
              prepend="Large"
              size="lg"
            />
    </CDBContainer>
  );
};
export default  InputGroup;

Input group with checkbox

import React from "react";
import { CDBInputGroup, CDBInput, CDBContainer } from "cdbreact";
const InputGroup = () => {
  return (
    <CDBContainer>
            <CDBInputGroup
              prepend={
                <div className="input-group-text md-addon">
                  <input type="checkbox"/>
                </div>
              }
            />
    </CDBContainer>
  );
};
export default  InputGroup;

Basic input

import React from "react";
import { CDBInputGroup, CDBInput, CDBContainer } from "cdbreact";
const InputGroup = () => {
  return (
    <CDBContainer>
            <CDBInputGroup/>
    </CDBContainer>
  );
};
export default  InputGroup;

API

In this section you will find advanced information about the InputGroup component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast InputGroup Import Statement

You need to import the Contrast InputGroup component first before using it.

import { CDBInputGroup } from "cdbreact";

API Reference: Contrast InputGroup Properties

The table below shows the configuration options of the CDBInputGroup component.