Input Group

@


@example.com

$
$
$
$

$
.00
import React from 'react';
import { InputGroup, InputGroupAddon, Input } from 'reactstrap';

const Example = (props) => {
  return (
    <div>
      <InputGroup>
        <InputGroupAddon>@</InputGroupAddon>
        <Input placeholder="username" />
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupAddon>
          <Input addon type="checkbox" aria-label="Checkbox for following text input" />
        </InputGroupAddon>
        <Input placeholder="Check it out" />
      </InputGroup>
      <br />
      <InputGroup>
        <Input placeholder="username" />
        <InputGroupAddon>@example.com</InputGroupAddon>
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupAddon>$</InputGroupAddon>
        <InputGroupAddon>$</InputGroupAddon>
        <Input placeholder="Dolla dolla billz yo!" />
        <InputGroupAddon>$</InputGroupAddon>
        <InputGroupAddon>$</InputGroupAddon>
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupAddon>$</InputGroupAddon>
        <Input placeholder="Amount" type="number" step="1" />
        <InputGroupAddon>.00</InputGroupAddon>
      </InputGroup>
    </div>
  );
};

export default Example;

Properties

InputGroup.propTypes = {
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  size: PropTypes.string,
  className: PropTypes.string
};

InputGroupAddOn.propTypes = {
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.string
};

InputGroupButton.propTypes = {
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  children: PropTypes.node,
  groupClassName: PropTypes.string, // only used in shorthand
  groupAttributes: PropTypes.object, // only used in shorthand
  className: PropTypes.string
};

Addons

To the Left!

To the Right!

To the Left!
To the Right!
import React from 'react';
import { InputGroup, InputGroupAddon, Input } from 'reactstrap';

const Example = (props) => {
  return (
    <div>
      <InputGroup>
        <InputGroupAddon>To the Left!</InputGroupAddon>
        <Input />
      </InputGroup>
      <br />
      <InputGroup>
        <Input />
        <InputGroupAddon>To the Right!</InputGroupAddon>
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupAddon>To the Left!</InputGroupAddon>
        <Input placeholder="and..." />
        <InputGroupAddon>To the Right!</InputGroupAddon>
      </InputGroup>
    </div>
  );
};

export default Example;

Addon Sizing

@lg

@normal

@sm
import React from 'react';
import { InputGroup, InputGroupAddon, Input } from 'reactstrap';

const Example = (props) => {
  return (
    <div>
      <InputGroup size="lg">
        <InputGroupAddon>@lg</InputGroupAddon>
        <Input />
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupAddon>@normal</InputGroupAddon>
        <Input />
      </InputGroup>
      <br />
      <InputGroup size="sm">
        <InputGroupAddon>@sm</InputGroupAddon>
        <Input />
      </InputGroup>
    </div>
  );
};

export default Example;

Buttons / Dropdowns



import React from 'react';
import { InputGroup, InputGroupButton, Input, Button } from 'reactstrap';
import ButtonDropdownExample from './ButtonDropdown';

const Example = (props) => {
  return (
    <div>
      <InputGroup>
        <InputGroupButton><Button>I'm a button</Button></InputGroupButton>
        <Input />
      </InputGroup>
      <br />
      <InputGroup>
        <Input />
        <InputGroupButton><ButtonDropdownExample /></InputGroupButton>
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupButton><ButtonDropdownExample /></InputGroupButton>
        <Input placeholder="and..." />
        <InputGroupButton><Button color="secondary">I'm a button</Button></InputGroupButton>
      </InputGroup>
    </div>
  );
};

export default Example;

Button Shorthand

Button shorthand is a convenience method for adding just a button. It is triggered when only a single string is the child. A Button will be created and all of the props will be passed to it with the exception ofgroupClassName and groupAttributes, which are used to added classes and attributes to the wrapping container. This means you can add your onClick and other handlers directly toInputGroupButton. If you want your string to not be wrapped in a button, then you really want to use InputGroupAddon (see Addons above for that).



import React from 'react';
import { InputGroup, InputGroupButton, Input } from 'reactstrap';

const Example = (props) => {
  return (
    <div>
      <InputGroup>
        <InputGroupButton>To the Left!</InputGroupButton>
        <Input />
      </InputGroup>
      <br />
      <InputGroup>
        <Input />
        <InputGroupButton color="secondary">To the Right!</InputGroupButton>
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupButton color="danger">To the Left!</InputGroupButton>
        <Input placeholder="and..." />
        <InputGroupButton color="success">To the Right!</InputGroupButton>
      </InputGroup>
    </div>
  );
};

export default Example;