Developed by Codescandy

Input Group

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Default Input

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.

Input

@
@example.com
https://example.com/users/
$.00
@
With textarea
<InputGroup className="mb-3">
    <InputGroup.Text id="basic-addon1">@</InputGroup.Text>
    <Form.Control type="text" placeholder="Username" />
</InputGroup>

<InputGroup className="mb-3">
    <Form.Control type="text" placeholder="Recipient's username" />
    <InputGroup.Text id="basic-addon2">@example.com</InputGroup.Text>
</InputGroup>

    <Form.Label htmlFor="basic-url">Your vanity URL</Form.Label>
<InputGroup className="mb-3">
    <InputGroup.Text id="basic-addon3">https://example.com/users/</InputGroup.Text>
    <Form.Control type="text" id="basic-url" />
</InputGroup>

<InputGroup className=" mb-3">
    <InputGroup.Text className="input-group-text">$</InputGroup.Text>
    <Form.Control type="text" />
    <InputGroup.Text>.00</InputGroup.Text>
</InputGroup>

<InputGroup className="mb-3">
    <Form.Control type="text" placeholder="Username" />
    <InputGroup.Text>@</InputGroup.Text>
    <Form.Control type="text" placeholder="Server" />
</InputGroup>

<InputGroup>
    <InputGroup.Text className="input-group-text">With textarea</InputGroup.Text>
    <Form.Control as="textarea" rows={2} />
</InputGroup>

Options

Sizing

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

Small
Default
Large
<InputGroup size="sm" className="mb-3">
    <InputGroup.Text id="inputGroup-sizing-sm">Small</InputGroup.Text>
    <Form.Control type="text" />
</InputGroup>

<InputGroup className="mb-3">
    <InputGroup.Text id="inputGroup-sizing-default">Default</InputGroup.Text>
    <Form.Control type="text" />
</InputGroup>

<InputGroup size="lg">
    <InputGroup.Text id="inputGroup-sizing-lg">Large</InputGroup.Text>
    <Form.Control type="text" />
</InputGroup>

Multiple input

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

First and last name
<InputGroup>
    <InputGroup.Text>First and last name</InputGroup.Text>
    <Form.Control type="text" />
    <Form.Control type="text" />
</InputGroup>

Multiple addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

$0.00
$0.00
<InputGroup className="mb-3">
    <InputGroup.Text>$</InputGroup.Text>
    <InputGroup.Text>0.00</InputGroup.Text>
    <Form.Control type="text" />
</InputGroup>

<InputGroup>
    <Form.Control type="text" />
    <InputGroup.Text>$</InputGroup.Text>
    <InputGroup.Text>0.00</InputGroup.Text>
</InputGroup>

Button addons

<InputGroup className="mb-3">
    <Button variant="outline-secondary" type="button" id="button-addon1">Button</Button>
    <Form.Control type="text" placeholder="" />
</InputGroup>

<InputGroup className="mb-3">
    <Form.Control type="text" placeholder="Recipient's username" />
    <Button variant="outline-secondary" type="button" id="button-addon2">Button</Button>
</InputGroup>

<InputGroup className="mb-3">
    <Button variant="outline-secondary" type="button">Button</Button>
    <Button variant="outline-secondary" type="button">Button</Button>
    <Form.Control type="text" placeholder="" />
</InputGroup>

<InputGroup>
    <Form.Control type="text" placeholder="Recipient's username"/>
    <Button variant="outline-secondary">Button</Button>
    <Button variant="outline-secondary">Button</Button>
</InputGroup>

Buttons with dropdowns

<InputGroup className="mb-3">
<Dropdown>
    <Dropdown.Toggle variant="outline-secondary ">Dropdown</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item href="">Action</Dropdown.Item>
        <Dropdown.Item href="">Another action</Dropdown.Item>
        <Dropdown.Item href="">Something else here</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item href="">Separated link</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>
<Form.Control type="text" />
</InputGroup>

<InputGroup className="mb-3">
<Form.Control type="text" />
<Dropdown>
<Dropdown.Toggle variant="outline-secondary ">Dropdown</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item href="">Action</Dropdown.Item>
        <Dropdown.Item href="">Another action</Dropdown.Item>
        <Dropdown.Item href="">Something else here</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item href="">Separated link</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>
</InputGroup>

<InputGroup>
<Dropdown>
    <Dropdown.Toggle variant="outline-secondary ">Dropdown</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item href="">Action</Dropdown.Item>
        <Dropdown.Item href="">Another action</Dropdown.Item>
        <Dropdown.Item href="">Something else here</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item href="">Separated link</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>
<Form.Control type="text" />
<Dropdown>
    <Dropdown.Toggle variant="outline-secondary ">Dropdown</Dropdown.Toggle>
    <Dropdown.Menu className="dropdown-menu-end">
        <Dropdown.Item href="">Action</Dropdown.Item>
        <Dropdown.Item href="">Another action</Dropdown.Item>
        <Dropdown.Item href="">Something else here</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item href="">Separated link</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>
</InputGroup>

Segmented buttons

<InputGroup className="mb-3">
<Button variant="outline-secondary">Action</Button>
<Dropdown drop="down">
    <Dropdown.Toggle variant="outline-secondary" split />
    <Dropdown.Menu>
        <Dropdown.Item href="">Action</Dropdown.Item>
        <Dropdown.Item href="">Another action</Dropdown.Item>
        <Dropdown.Item href="">Something else here</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item href="">Separated link</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>
<Form.Control type="text" />
</InputGroup>

<InputGroup className="mb-3">
    <Form.Control type="text" />
    <Button variant="outline-secondary">Action</Button>
    <Dropdown drop="down">
        <Dropdown.Toggle variant="outline-secondary" split />
        <Dropdown.Menu className="dropdown-menu-end">
            <Dropdown.Item href="">Action</Dropdown.Item>
            <Dropdown.Item href="">Another action</Dropdown.Item>
            <Dropdown.Item href="">Something else here</Dropdown.Item>
            <Dropdown.Divider />
            <Dropdown.Item href="">Separated link</Dropdown.Item>
        </Dropdown.Menu>
    </Dropdown>
</InputGroup>

Custom select

Options
Options
<InputGroup className="input-group mb-3">
    <InputGroup.Text htmlFor="inputGroupSelect01">Options</InputGroup.Text>
    <Form.Select id="inputGroupSelect01">
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </Form.Select>
</InputGroup>

<InputGroup className=" mb-3">
    <Form.Select id="inputGroupSelect02">
    <option value="">Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    </Form.Select>
    <InputGroup.Text htmlFor="inputGroupSelect02">Options</InputGroup.Text>
</InputGroup>

<InputGroup className=" mb-3">
    <Button variant="outline-secondary" type="button">Button</Button>
    <Form.Select id="inputGroupSelect03">
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </Form.Select>
</InputGroup>

<InputGroup>
    <Form.Select id="inputGroupSelect04">
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </Form.Select>
    <Button variant="outline-secondary" type="button">Button</Button>
</InputGroup>

Custom file input

Upload
Upload
<InputGroup className="mb-3">
    <InputGroup.Text htmlFor="inputGroupFile01">Upload</InputGroup.Text>
    <Form.Control type="file" id="inputGroupFile01" />
</InputGroup>
<InputGroup className=" mb-3">
    <Form.Control type="file" id="inputGroupFile02" />
    <InputGroup.Text htmlFor="inputGroupFile02">Upload</InputGroup.Text>
</InputGroup>
<InputGroup className=" mb-3">
    <Button variant="outline-secondary" type="button" id="inputGroupFileAddon03">Button</Button>
    <Form.Control type="file" id="inputGroupFile03" />
</InputGroup>
<InputGroup>
    <Form.Control type="file" id="inputGroupFile04" />
    <Button variant="outline-secondary" type="button" id="inputGroupFileAddon04">Button</Button>
</InputGroup>
Contents