Reactstrap Input Group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Example

Default

@example.com

Your vanity URL

https://example.com/users/

.00

With textarea

import React from "react";

// reactstrap components
import {
  FormGroup,
  Input,
  InputGroupAddon,
  InputGroupText,
  InputGroup,
} from "reactstrap";

function Example() {
  const [focus1, setFocus1] = React.useState(false);
  const [focus2, setFocus2] = React.useState(false);
  const [focus3, setFocus3] = React.useState(false);
  const [focus4, setFocus4] = React.useState(false);
  const [focus5, setFocus5] = React.useState(false);
  return (
    <>
      <FormGroup className={focus1 ? "focused" : ""}>
        <InputGroup>
          <InputGroupAddon addonType="prepend">
            <InputGroupText id="basic-addon1">@</InputGroupText>
          </InputGroupAddon>
          <Input
            onFocus={() => setFocus1(true)}
            onBlur={() => setFocus1(false)}
            aria-describedby="basic-addon1"
            aria-label="Username"
            placeholder="Username"
            type="text"
          ></Input>
        </InputGroup>
      </FormGroup>
      <FormGroup className={focus2 ? "focused" : ""}>
        <InputGroup>
          <Input
            onFocus={() => setFocus2(true)}
            onBlur={() => setFocus2(false)}
            aria-describedby="basic-addon2"
            aria-label="Recipient's username"
            placeholder="Recipient's username"
            type="text"
          ></Input>
          <InputGroupAddon addonType="append">
            <InputGroupText id="basic-addon2">@example.com</InputGroupText>
          </InputGroupAddon>
        </InputGroup>
      </FormGroup>
      <FormGroup className={focus3 ? "focused" : ""}>
        <label className=" form-control-label" htmlFor="basic-url">
          Your vanity URL
        </label>
        <InputGroup>
          <InputGroupAddon addonType="prepend">
            <InputGroupText id="basic-addon3">
              https://example.com/users/
            </InputGroupText>
          </InputGroupAddon>
          <Input
            onFocus={() => setFocus3(true)}
            onBlur={() => setFocus3(false)}
            aria-describedby="basic-addon3"
            id="basic-url"
            type="text"
          ></Input>
        </InputGroup>
      </FormGroup>
      <FormGroup className={focus4 ? "focused" : ""}>
        <InputGroup>
          <InputGroupAddon addonType="prepend">
            <InputGroupText>$</InputGroupText>
          </InputGroupAddon>
          <Input
            onFocus={() => setFocus4(true)}
            onBlur={() => setFocus4(false)}
            aria-label="Amount (to the nearest dollar)"
            type="text"
          ></Input>
          <InputGroupAddon addonType="append">
            <InputGroupText>.00</InputGroupText>
          </InputGroupAddon>
        </InputGroup>
      </FormGroup>
      <FormGroup className={focus5 ? "focused" : ""}>
        <InputGroup>
          <InputGroupAddon addonType="prepend">
            <InputGroupText>With textarea</InputGroupText>
          </InputGroupAddon>
          <Input
            aria-label="With textarea"
            type="textarea"
            onFocus={() => setFocus5(true)}
            onBlur={() => setFocus5(false)}
          ></Input>
        </InputGroup>
      </FormGroup>
    </>
  );
}

export default Example;

Sizing

Small

Default

Large

import React from "react";

// reactstrap components
import {
  FormGroup,
  Input,
  InputGroupAddon,
  InputGroupText,
  InputGroup,
} from "reactstrap";

function Example() {
  const [focus1, setFocus1] = React.useState(false);
  const [focus2, setFocus2] = React.useState(false);
  const [focus3, setFocus3] = React.useState(false);
  return (
    <>
      <FormGroup className={focus1 ? "focused" : ""}>
        <InputGroup size="sm">
          <InputGroupAddon addonType="prepend">
            <InputGroupText id="inputGroup-sizing-sm">Small</InputGroupText>
          </InputGroupAddon>
          <Input
            onFocus={() => setFocus1(true)}
            onBlur={() => setFocus1(false)}
            aria-describedby="inputGroup-sizing-sm"
            aria-label="Sizing example input"
            type="text"
          ></Input>
        </InputGroup>
      </FormGroup>
      <FormGroup className={focus2 ? "focused" : ""}>
        <InputGroup>
          <InputGroupAddon addonType="prepend">
            <InputGroupText id="inputGroup-sizing-default">
              Default
            </InputGroupText>
          </InputGroupAddon>
          <Input
            onFocus={() => setFocus2(true)}
            onBlur={() => setFocus2(false)}
            aria-describedby="inputGroup-sizing-default"
            aria-label="Sizing example input"
            type="text"
          ></Input>
        </InputGroup>
      </FormGroup>
      <FormGroup className={focus3 ? "focused" : ""}>
        <InputGroup size="lg">
          <InputGroupAddon addonType="prepend">
            <InputGroupText id="inputGroup-sizing-lg">Large</InputGroupText>
          </InputGroupAddon>
          <Input
            onFocus={() => setFocus3(true)}
            onBlur={() => setFocus3(false)}
            aria-describedby="inputGroup-sizing-lg"
            aria-label="Sizing example input"
            type="text"
          ></Input>
        </InputGroup>
      </FormGroup>
    </>
  );
}

export default Example;

Checkboxes and radios

import React from "react";

// reactstrap components
import {
  FormGroup,
  Input,
  InputGroupAddon,
  InputGroupText,
  InputGroup,
} from "reactstrap";

function Example() {
  const [focus1, setFocus1] = React.useState(false);
  const [focus2, setFocus2] = React.useState(false);
  return (
    <>
      <FormGroup className={focus1 ? "focused" : ""}>
        <InputGroup>
          <InputGroupAddon addonType="prepend">
            <InputGroupText>
              <input
                aria-label="Checkbox for following text input"
                type="checkbox"
              ></input>
            </InputGroupText>
          </InputGroupAddon>
          <Input
            aria-label="Text input with checkbox"
            type="text"
            onFocus={() => setFocus1(true)}
            onBlur={() => setFocus1(false)}
          ></Input>
        </InputGroup>
      </FormGroup>
      <FormGroup className={focus2 ? "focused" : ""}>
        <InputGroup>
          <InputGroupAddon addonType="prepend">
            <InputGroupText>
              <input
                aria-label="Radio button for following text input"
                type="radio"
              ></input>
            </InputGroupText>
          </InputGroupAddon>
          <Input
            aria-label="Text input with radio button"
            type="text"
            onFocus={() => setFocus2(true)}
            onBlur={() => setFocus2(false)}
          ></Input>
        </InputGroup>
      </FormGroup>
    </>
  );
}

export default Example;

Multiple inputs

First and last name

import React from "react";

// reactstrap components
import { Input, InputGroupAddon, InputGroupText, InputGroup } from "reactstrap";

function Example() {
  const [focus1, setFocus1] = React.useState(false);
  return (
    <>
      <InputGroup className={focus1 ? "focused" : ""}>
        <InputGroupAddon addonType="prepend">
          <InputGroupText>First and last name</InputGroupText>
        </InputGroupAddon>
        <Input
          aria-label="First name"
          type="text"
          onFocus={() => setFocus1(true)}
          onBlur={() => setFocus1(false)}
        ></Input>
        <Input
          aria-label="Last name"
          type="text"
          onFocus={() => setFocus1(true)}
          onBlur={() => setFocus1(false)}
        ></Input>
      </InputGroup>
    </>
  );
}

export default Example;

Multiple addons

$ 0.00

import React from "react";

// reactstrap components
import { Input, InputGroupAddon, InputGroupText, InputGroup } from "reactstrap";

function Example() {
  const [focus1, setFocus1] = React.useState(false);
  const [focus2, setFocus2] = React.useState(false);
  return (
    <>
      <InputGroup className={"mb-3 " + (focus1 ? "focused" : "")}>
        <InputGroupAddon addonType="prepend">
          <InputGroupText>$</InputGroupText>
          <InputGroupText>0.00</InputGroupText>
        </InputGroupAddon>
        <Input
          onFocus={() => setFocus1(true)}
          onBlur={() => setFocus1(false)}
          aria-label="Dollar amount (with dot and two decimal places)"
          type="text"
        ></Input>
      </InputGroup>
      <InputGroup className={focus2 ? "focused" : ""}>
        <Input
          onFocus={() => setFocus2(true)}
          onBlur={() => setFocus2(false)}
          aria-label="Dollar amount (with dot and two decimal places)"
          type="text"
        ></Input>
        <InputGroupAddon addonType="append">
          <InputGroupText>$</InputGroupText>
          <InputGroupText>0.00</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </>
  );
}

export default Example;

Button addons

import React from "react";

// reactstrap components
import { Button, Input, InputGroupAddon, InputGroup } from "reactstrap";

function Example() {
  const [focus1, setFocus1] = React.useState(false);
  const [focus2, setFocus2] = React.useState(false);
  const [focus3, setFocus3] = React.useState(false);
  const [focus4, setFocus4] = React.useState(false);
  return (
    <>
      <InputGroup className={"mb-3" + (focus1 ? "focused" : "")}>
        <InputGroupAddon addonType="prepend">
          <Button color="primary" id="button-addon1" outline type="button">
            Button
          </Button>
        </InputGroupAddon>
        <Input
          onFocus={() => setFocus1(true)}
          onBlur={() => setFocus1(false)}
          aria-describedby="button-addon1"
          aria-label="Example text with button addon"
          placeholder=""
          type="text"
        ></Input>
      </InputGroup>
      <InputGroup className={"mb-3" + (focus2 ? "focused" : "")}>
        <Input
          onFocus={() => setFocus2(true)}
          onBlur={() => setFocus2(false)}
          aria-describedby="button-addon2"
          aria-label="Recipient's username"
          placeholder="Recipient's username"
          type="text"
        ></Input>
        <InputGroupAddon addonType="append">
          <Button color="primary" id="button-addon2" outline type="button">
            Button
          </Button>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup className={"mb-3" + (focus3 ? "focused" : "")}>
        <InputGroupAddon addonType="prepend" id="button-addon3">
          <Button color="primary" outline type="button">
            Button
          </Button>
          <Button color="primary" outline type="button">
            Button
          </Button>
        </InputGroupAddon>
        <Input
          onFocus={() => setFocus3(true)}
          onBlur={() => setFocus3(false)}
          aria-describedby="button-addon3"
          aria-label="Example text with two button addons"
          placeholder=""
          type="text"
        ></Input>
      </InputGroup>
      <InputGroup className={focus4 ? "focused" : ""}>
        <Input
          onFocus={() => setFocus4(true)}
          onBlur={() => setFocus4(false)}
          aria-describedby="button-addon4"
          aria-label="Recipient's username with two button addons"
          placeholder="Recipient's username"
          type="text"
        ></Input>
        <InputGroupAddon addonType="append" id="button-addon4">
          <Button color="primary" outline type="button">
            Button
          </Button>
          <Button color="primary" outline type="button">
            Button
          </Button>
        </InputGroupAddon>
      </InputGroup>
    </>
  );
}

export default Example;

Props

If you want to see more examples and properties please check the official Reactstrap Documentation.