# Input groups InputGroup, InputGroup.Addon, InputGroup.Button

# Input add-ons

Wrap your form control in an <InputGroup>, then use for normal add-ons and for button add-ons. Exotic configurations may require CSS on your side.


            const formInstance = (
              <Form>
                <FormGroup>
                  <InputGroup>
                    <InputGroup.Addon>@</InputGroup.Addon>
                    <FormControl type="text" />
                  </InputGroup>
                </FormGroup>
                <FormGroup>
                  <InputGroup>
                    <FormControl type="text" />
                    <InputGroup.Addon>.00</InputGroup.Addon>
                  </InputGroup>
                </FormGroup>
                <FormGroup>
                  <InputGroup>
                    <InputGroup.Addon>{container}lt;/InputGroup.Addon>
                    <FormControl type="text" />
                    <InputGroup.Addon>.00</InputGroup.Addon>
                  </InputGroup>
                </FormGroup>

                <FormGroup>
                  <InputGroup>
                    <FormControl type="text" />
                    <InputGroup.Addon>
                      <Glyphicon glyph="music" />
                    </InputGroup.Addon>
                  </InputGroup>
                </FormGroup>

                <FormGroup>
                  <InputGroup>
                    <FormControl type="text" />
                    <InputGroup.Button>
                      <Button>Before</Button>
                    </InputGroup.Button>
                  </InputGroup>
                </FormGroup>
                <FormGroup>
                  <InputGroup>
                    <DropdownButton
                      onlyOnHover
                      componentClass={InputGroup.Button}
                      id="input-dropdown-addon"
                      title="Action"
                    >
                      <MenuItem key="1">Item</MenuItem>
                    </DropdownButton>
                    <FormControl type="text" />
                  </InputGroup>
                </FormGroup>

                <FormGroup>
                  <InputGroup>
                    <InputGroup.Addon>
                      <input type="radio" aria-label="..." />
                    </InputGroup.Addon>
                    <FormControl type="text" />
                  </InputGroup>
                </FormGroup>
                <FormGroup>
                  <InputGroup>
                    <InputGroup.Addon>
                      <input type="checkbox" aria-label="..." />
                    </InputGroup.Addon>
                    <FormControl type="text" />
                  </InputGroup>
                </FormGroup>
              </Form>
            );

            
          

# Input sizes

Use bsSize on <FormGroup> or <InputGroup> to change the size of inputs. It also works with add-ons and most other options.


            const formInstance = (
              <div>
                <Form>
                  <FormGroup bsSize="large">
                    <FormControl type="text" placeholder="Large text" />
                  </FormGroup>
                  <FormGroup>
                    <FormControl type="text" placeholder="Normal text" />
                  </FormGroup>
                  <FormGroup bsSize="small">
                    <FormControl type="text" placeholder="Small text" />
                  </FormGroup>
                </Form>
                <Form horizontal>
                  <FormGroup bsSize="large">
                    <Col componentClass={ControlLabel} sm={2} htmlFor='formGroupInputLarge'>
                    Large label
                    </Col>
                    <Col sm={10}>
                      <FormControl type="text" id='formGroupInputLarge' placeholder="Large text" />
                    </Col>
                  </FormGroup>
                  <FormGroup bsSize="small">
                    <Col componentClass={ControlLabel} sm={2} htmlFor='formGroupInputLarge1'>
                    Large label
                    </Col>
                    <Col sm={10}>
                      <FormControl type="text" id='formGroupInputLarge1' placeholder="Large text" />
                    </Col>
                  </FormGroup>
                </Form>
              </div>
            );

            
          

# Props

InputGroup

NameTypeDefaultDescription
bsClassstring'input-group'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
bsSizeone of: "lg", "large", "sm", "small"Component size variations.

InputGroup.Addon

NameTypeDefaultDescription
bsClassstring'input-group-addon'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.

InputGroup.Button

NameTypeDefaultDescription
bsClassstring'input-group-btn'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.