Nextjs Input Group

Easily extend form controls with Nextjs input, 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() {
  return (
    <>
      <FormGroup>
        <InputGroup>
          <InputGroupAddon addonType="prepend">
            <InputGroupText id="basic-addon1">@</InputGroupText>
          </InputGroupAddon>
          <Input
            aria-describedby="basic-addon1"
            aria-label="Username"
            placeholder="Username"
            type="text"
          ></Input>
        </InputGroup>
      </FormGroup>
      <FormGroup>
        <InputGroup>
          <Input
            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>
        <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
            aria-describedby="basic-addon3"
            id="basic-url"
            type="text"
          ></Input>
        </InputGroup>
      </FormGroup>
      <FormGroup>
        <InputGroup>
          <InputGroupAddon addonType="prepend">
            <InputGroupText>$</InputGroupText>
          </InputGroupAddon>
          <Input
            aria-label="Amount (to the nearest dollar)"
            type="text"
          ></Input>
          <InputGroupAddon addonType="append">
            <InputGroupText>.00</InputGroupText>
          </InputGroupAddon>
        </InputGroup>
      </FormGroup>
      <FormGroup>
        <InputGroup>
          <InputGroupAddon addonType="prepend">
            <InputGroupText>With textarea</InputGroupText>
          </InputGroupAddon>
          <Input aria-label="With textarea" type="textarea"></Input>
        </InputGroup>
      </FormGroup>
    </>
  );
}

export default Example;

Merged

You can choose to merge input group elements by removing the border between them using the .input-group-merge modifier class.

@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() {
  return (
    <>
      <FormGroup>
        <InputGroup className=" input-group-merge">
          <InputGroupAddon addonType="prepend">
            <InputGroupText id="basic-addon1">@</InputGroupText>
          </InputGroupAddon>
          <Input
            aria-describedby="basic-addon1"
            aria-label="Username"
            placeholder="Username"
            type="text"
          ></Input>
        </InputGroup>
      </FormGroup>
      <FormGroup>
        <InputGroup className=" input-group-merge">
          <Input
            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>
        <label className=" form-control-label" htmlFor="basic-url">
          Your vanity URL
        </label>
        <InputGroup className=" input-group-merge">
          <InputGroupAddon addonType="prepend">
            <InputGroupText id="basic-addon3">
              https://example.com/users/
            </InputGroupText>
          </InputGroupAddon>
          <Input
            aria-describedby="basic-addon3"
            id="basic-url"
            type="text"
          ></Input>
        </InputGroup>
      </FormGroup>
      <FormGroup>
        <InputGroup className=" input-group-merge">
          <InputGroupAddon addonType="prepend">
            <InputGroupText>$</InputGroupText>
          </InputGroupAddon>
          <Input
            aria-label="Amount (to the nearest dollar)"
            type="text"
          ></Input>
          <InputGroupAddon addonType="append">
            <InputGroupText>.00</InputGroupText>
          </InputGroupAddon>
        </InputGroup>
      </FormGroup>
      <FormGroup>
        <InputGroup className=" input-group-merge">
          <InputGroupAddon addonType="prepend">
            <InputGroupText>With textarea</InputGroupText>
          </InputGroupAddon>
          <Input aria-label="With textarea"></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() {
  return (
    <>
      <FormGroup>
        <InputGroup className=" input-group-sm">
          <InputGroupAddon addonType="prepend">
            <InputGroupText id="inputGroup-sizing-sm">Small</InputGroupText>
          </InputGroupAddon>
          <Input
            aria-describedby="inputGroup-sizing-sm"
            aria-label="Sizing example input"
            type="text"
          ></Input>
        </InputGroup>
      </FormGroup>
      <FormGroup>
        <InputGroup>
          <InputGroupAddon addonType="prepend">
            <InputGroupText id="inputGroup-sizing-default">
              Default
            </InputGroupText>
          </InputGroupAddon>
          <Input
            aria-describedby="inputGroup-sizing-default"
            aria-label="Sizing example input"
            type="text"
          ></Input>
        </InputGroup>
      </FormGroup>
      <FormGroup>
        <InputGroup className=" input-group-lg">
          <InputGroupAddon addonType="prepend">
            <InputGroupText id="inputGroup-sizing-lg">Large</InputGroupText>
          </InputGroupAddon>
          <Input
            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() {
  return (
    <>
      <FormGroup>
        <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"></Input>
        </InputGroup>
      </FormGroup>
      <FormGroup>
        <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"></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() {
  return (
    <>
      <InputGroup>
        <InputGroupAddon addonType="prepend">
          <InputGroupText>First and last name</InputGroupText>
        </InputGroupAddon>
        <Input aria-label="First name" type="text"></Input>
        <Input aria-label="Last name" type="text"></Input>
      </InputGroup>
    </>
  );
}

export default Example;

Multiple addons

$ 0.00

import React from "react";

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

function Example() {
  return (
    <>
      <InputGroup className=" mb-3">
        <InputGroupAddon addonType="prepend">
          <InputGroupText>$</InputGroupText>
          <InputGroupText>0.00</InputGroupText>
        </InputGroupAddon>
        <Input
          aria-label="Dollar amount (with dot and two decimal places)"
          type="text"
        ></Input>
      </InputGroup>
      <InputGroup>
        <Input
          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() {
  return (
    <>
      <InputGroup className=" mb-3">
        <InputGroupAddon addonType="prepend">
          <Button color="primary" id="button-addon1" outline type="button">
            Button
          </Button>
        </InputGroupAddon>
        <Input
          aria-describedby="button-addon1"
          aria-label="Example text with button addon"
          placeholder=""
          type="text"
        ></Input>
      </InputGroup>
      <InputGroup className=" mb-3">
        <Input
          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">
        <InputGroupAddon addonType="prepend" id="button-addon3">
          <Button color="primary" outline type="button">
            Button
          </Button>
          <Button color="primary" outline type="button">
            Button
          </Button>
        </InputGroupAddon>
        <Input
          aria-describedby="button-addon3"
          aria-label="Example text with two button addons"
          placeholder=""
          type="text"
        ></Input>
      </InputGroup>
      <InputGroup>
        <Input
          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;