InputGroup

    Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>s outside the input group.

    @
    @example.com
    https://example.com/users/
    $
    .00
    With textarea

    Sizing

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

    Small

    Default

    Large

    Checkboxes and radios

    Use the InputGroup.Radio or InputGroup.Checkbox to add options to an input group.

    Multiple inputs

    While multiple inputs are supported visually, validation styles are only available for input groups with a single input.

    First and last name

    Multiple addons

    Multiple add-ons are supported and can be mixed

    $0.00
    $0.00

    Button addons

    Buttons with Dropdowns

    API

    import InputGroup from 'react-bootstrap/InputGroup'Copy import code for the InputGroup component
    NameTypeDefaultDescription
    as
    elementType
    <div>

    You can use a custom element type for this component.

    size
    'sm' | 'lg'

    Control the size of buttons and form elements from the top-level .

    bsPrefix
    string
    'input-group'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.