Input Group

Using the InputGroup component you can easily extend form controls by adding various elements such as text, buttons and button groups.

Basic Input Groups

designrevision.com/user/

import React from "react";
import {
  InputGroup,
  InputGroupText,
  InputGroupAddon,
  FormInput,
  Button
} from "shards-react";

export default function FormSelectDemo() {
  return (
    <div>
      <InputGroup className="mb-2">
        <InputGroupAddon type="prepend">
          <InputGroupText>$</InputGroupText>
        </InputGroupAddon>
        <FormInput placeholder="Total Amount" />
      </InputGroup>

      <InputGroup className="mb-2">
        <FormInput placeholder="Total Amount" />
        <InputGroupAddon type="append">
          <InputGroupText>$</InputGroupText>
        </InputGroupAddon>
      </InputGroup>

      <InputGroup>
        <InputGroupAddon type="prepend">
          <InputGroupText>designrevision.com/user/</InputGroupText>
        </InputGroupAddon>
        <FormInput placeholder="username" />
        <InputGroupAddon type="append">
          <Button theme="secondary">Check</Button>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

Input Group Addons

Input group addons can be created using the <InputGroupAddon> component. The type of the addon component can be also controlled via the type prop using either append or prepend as values.

Total Amount

.00 (USD)

import React from "react";
import {
  InputGroup,
  InputGroupText,
  InputGroupAddon,
  FormInput
} from "shards-react";

export default function InputGroupAddonExample() {
  return (
    <InputGroup>
      <InputGroupAddon type="prepend">
        <InputGroupText>Total Amount</InputGroupText>
      </InputGroupAddon>
      <FormInput />
      <InputGroupAddon type="append">
        <InputGroupText>.00 (USD)</InputGroupText>
      </InputGroupAddon>
    </InputGroup>
  );
}

Input Group Dropdowns

You can create dropdowns inside input groups via the addonType prop on the Dropdown component.

import React from "react";
import {
  InputGroup,
  FormInput,
  Dropdown,
  DropdownItem,
  DropdownToggle,
  DropdownMenu
} from "shards-react";

export default class InputGroupDropdownExample extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      open: false
    };
  }

  toggle() {
    this.setState({ open: !this.state.open });
  }

  render() {
    return (
      <InputGroup>
        <FormInput />
        <Dropdown
          addonType="append"
          open={this.state.open}
          toggle={this.toggle}
        >
          <DropdownToggle caret>Dropdown</DropdownToggle>
          <DropdownMenu right>
            <DropdownItem>Action</DropdownItem>
            <DropdownItem>Another action</DropdownItem>
            <DropdownItem>Something else here</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </InputGroup>
    );
  }
}

Sizing

You can control the size of your input group via the size prop. Available options are sm for small and lg for large.

Total Amount

$ (USD)

Total Amount

$ (USD)

Total Amount

$ (USD)

import React from "react";
import {
  InputGroup,
  InputGroupText,
  InputGroupAddon,
  FormInput
} from "shards-react";

export default function InputGroupAddonExample() {
  return (
    <div>
      <InputGroup size="sm" className="mb-2">
        <InputGroupAddon type="prepend">
          <InputGroupText>Total Amount</InputGroupText>
        </InputGroupAddon>
        <FormInput />
        <InputGroupAddon type="append">
          <InputGroupText>$ (USD)</InputGroupText>
        </InputGroupAddon>
      </InputGroup>

      <InputGroup className="mb-2">
        <InputGroupAddon type="prepend">
          <InputGroupText>Total Amount</InputGroupText>
        </InputGroupAddon>
        <FormInput />
        <InputGroupAddon type="append">
          <InputGroupText>$ (USD)</InputGroupText>
        </InputGroupAddon>
      </InputGroup>

      <InputGroup size="lg">
        <InputGroupAddon type="prepend">
          <InputGroupText>Total Amount</InputGroupText>
        </InputGroupAddon>
        <FormInput />
        <InputGroupAddon type="append">
          <InputGroupText>$ (USD)</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

Seamless Input Groups

You can create seamless input groups using the seamless prop.

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  InputGroup,
  InputGroupText,
  InputGroupAddon,
  FormInput
} from "shards-react";

export default function InputGroupAddonExample() {
  return (
    <InputGroup seamless>
      <InputGroupAddon type="prepend">
        <InputGroupText>
          <FontAwesomeIcon icon={["fab", "twitter"]} />
        </InputGroupText>
      </InputGroupAddon>
      <FormInput />
    </InputGroup>
  );
}

Props

The following props are available for the Input Group component.

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
children	The children nodes.	`Node`	-	No
size	The size.	`String`	-	No
seamless	Whether it is seamless, or not.	`Bool`	-	No
tag	The tag type.	`FuncString`	`"div"`	No

Subcomponents

The following subcomponents are available for the InputGroup component.

<InputGroupAddon/>

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
children	The children nodes.	`Node`	-	No
type	The addon type.	`Enum`	-	Yes
tag	The component's tag type.	`String`	`"div"`	No

<InputGroupText/>

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
tag	The component's tag type.	`FuncString`	`"span"`	No