Bootstrap: Input Groups

Basic Example

Extend Input components by adding text or buttons before, after, or on both sides of any text-based input. Use InputGroup with an InputGroupAddon to prepend or append elements to a single Input.

@

.00

$
.00
<InputGroup>
  <InputGroupAddon>@</InputGroupAddon>
  <Input type='text' placeholder='Username'/>
</InputGroup><br/>
<InputGroup>
  <Input type='text'/>
  <InputGroupAddon>.00</InputGroupAddon>
</InputGroup><br/>
<InputGroup>
  <InputGroupAddon>{container}lt;/InputGroupAddon>
  <Input type='text'/>
  <InputGroupAddon>.00</InputGroupAddon>
</InputGroup>

Sizing

Add the relative form sizing classes to the InputGroup itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

@

@

@
<InputGroup lg>
  <InputGroupAddon>@</InputGroupAddon>
  <Input type='text' placeholder='Username'/>
</InputGroup><br/>
<InputGroup>
  <InputGroupAddon>@</InputGroupAddon>
  <Input type='text' placeholder='Username'/>
</InputGroup><br/>
<InputGroup sm>
  <InputGroupAddon>@</InputGroupAddon>
  <Input type='text' placeholder='Username'/>
</InputGroup>

Checkboxes and Radio addons

Place any checkbox or radio option within an InputGroupAddon instead of text..

<Grid>
  <Row>
    <Col xs={6}>
      <InputGroup>
        <InputGroupAddon><Checkbox native/></InputGroupAddon>
        <Input type='text' placeholder='Username'/>
      </InputGroup>
    </Col>
    <Col xs={6}>
      <InputGroup>
        <InputGroupAddon><Radio native/></InputGroupAddon>
        <Input type='text' placeholder='Username'/>
      </InputGroup>
    </Col>
  </Row>
</Grid>

Button addons

<Grid>
  <Row>
    <Col xs={6}>
      <InputGroup>
        <InputGroupButton><Button onlyOnHover>Go!</Button></InputGroupButton>
        <Input type='text' placeholder='Username'/>
      </InputGroup>
    </Col>
    <Col xs={6}>
      <InputGroup>
        <Input type='text' placeholder='Username'/>
        <InputGroupButton><Button onlyOnHover>Go!</Button></InputGroupButton>
      </InputGroup>
    </Col>
  </Row>
</Grid>

Button with dropdowns

<Grid>
  <Row>
    <Col xs={6}>
      <InputGroup>
        <InputGroupButton>
          <DropdownButton onlyOnHover container={this} menu='menu29'>
            <span>Action </span><Caret/>
          </DropdownButton>
          <Menu ref='menu29'>
            <MenuItem href='#'>Action</MenuItem>
            <MenuItem href='#'>Another Action</MenuItem>
            <MenuItem href='#'>Something else here</MenuItem>
            <MenuItem divider></MenuItem>
            <MenuItem href='#'>Separated link</MenuItem>
          </Menu>
        </InputGroupButton>
        <Input type='text' placeholder='Username'/>
      </InputGroup>
    </Col>
    <Col xs={6}>
      <InputGroup>
        <Input type='text' placeholder='Username'/>
        <InputGroupButton>
          <DropdownButton onlyOnHover container={this} menu='menu30'>
            <span>Action </span><Caret/>
          </DropdownButton>
          <Menu ref='menu30' alignRight>
            <MenuItem href='#'>Action</MenuItem>
            <MenuItem href='#'>Another Action</MenuItem>
            <MenuItem href='#'>Something else here</MenuItem>
            <MenuItem divider></MenuItem>
            <MenuItem href='#'>Separated link</MenuItem>
          </Menu>
        </InputGroupButton>
      </InputGroup>
    </Col>
  </Row>
</Grid>

Segmented buttons

<Grid>
  <Row>
    <Col xs={6}>
      <InputGroup>
        <InputGroupButton>
          <Button onlyOnHover>Action </Button>
          <DropdownButton onlyOnHover container={this} menu='menu31'>
            <Caret/>
          </DropdownButton>
          <Menu ref='menu31'>
            <MenuItem href='#'>Action</MenuItem>
            <MenuItem href='#'>Another Action</MenuItem>
            <MenuItem href='#'>Something else here</MenuItem>
            <MenuItem divider></MenuItem>
            <MenuItem href='#'>Separated link</MenuItem>
          </Menu>
        </InputGroupButton>
        <Input type='text' placeholder='Username'/>
      </InputGroup>
    </Col>
    <Col xs={6}>
      <InputGroup>
        <Input type='text' placeholder='Username'/>
        <InputGroupButton>
          <Button onlyOnHover>Action </Button>
          <DropdownButton onlyOnHover container={this} menu='menu32'>
            <Caret/>
          </DropdownButton>
          <Menu ref='menu32' alignRight>
            <MenuItem href='#'>Action</MenuItem>
            <MenuItem href='#'>Another Action</MenuItem>
            <MenuItem href='#'>Something else here</MenuItem>
            <MenuItem divider></MenuItem>
            <MenuItem href='#'>Separated link</MenuItem>
          </Menu>
        </InputGroupButton>
      </InputGroup>
    </Col>
  </Row>
</Grid>