# Input Group

### Basic Input Group

{% tabs %}
{% tab title="Basic" %}
![](/files/-Luq0wa4I-yzpsq34XXA)
{% endtab %}

{% tab title="Source Code" %}

```markup
<!-- Input Group -->
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<!-- /input group -->

<!-- Input Group -->
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
    <div class="input-group-append">
        <span class="input-group-text" id="basic-addon2">@example.com</span>
    </div>
</div>
<!-- /input group -->

<!-- Input Group -->
<label for="basic-url">Your vanity URL</label>
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
    </div>
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<!-- /input group -->

<!-- Input Group -->
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">$</span>
    </div>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    <div class="input-group-append">
        <span class="input-group-text">.00</span>
    </div>
</div>
<!-- /input group -->

<!-- Input Group -->
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">With textarea</span>
    </div>
    <textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<!-- /input group -->
```

{% endtab %}
{% endtabs %}

### Sizing Input Group

{% tabs %}
{% tab title="Sizing" %}
![](/files/-Luq1OxdTqfYB4s5-4Rc)
{% endtab %}

{% tab title="Source Code" %}

```markup
<!-- Input Group -->
<div class="input-group input-group-sm mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
    </div>
    <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
<!-- /input group -->

<!-- Input Group -->
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
    </div>
    <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<!-- /input group -->

<!-- Input Group -->
<div class="input-group input-group-lg">
    <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
    </div>
    <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>
<!-- /input group -->
```

{% endtab %}
{% endtabs %}

### Checkbox & radio Input Group

{% tabs %}
{% tab title="Checkbox & radio" %}
![](/files/-Luq3TXdY31URL5E5O9H)
{% endtab %}

{% tab title="Source Code" %}

```markup
<!-- Input Group -->
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <div class="input-group-text">
            <input type="checkbox" aria-label="Checkbox for following text input">
        </div>
    </div>
    <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
<!-- /input group -->

<!-- Input Group -->
<div class="input-group">
    <div class="input-group-prepend">
        <div class="input-group-text">
            <input type="radio" aria-label="Radio button for following text input">
        </div>
    </div>
    <input type="text" class="form-control" aria-label="Text input with radio button">
</div>
<!-- /input group -->
```

{% endtab %}
{% endtabs %}

### Multiple Inputs

{% tabs %}
{% tab title="Multiple Input" %}
![](/files/-Luq2OWUKT3a3yEflgne)
{% endtab %}

{% tab title="Source Code" %}

```
<!-- Input Group -->
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">First and last name</span>
    </div>
    <input type="text" class="form-control">
    <input type="text" class="form-control">
</div>
<!-- /input group -->
```

{% endtab %}
{% endtabs %}

### Multiple Addons

{% tabs %}
{% tab title="Multiple Addons" %}
![](/files/-Luq5B6vNmZOToJY0Ak2)
{% endtab %}

{% tab title="Source Code" %}

```markup
<!-- Input Group -->
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">$</span>
        <span class="input-group-text">0.00</span>
    </div>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>
<!-- /input group -->

<!-- Input Group -->
<div class="input-group">
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    <div class="input-group-append">
        <span class="input-group-text">$</span>
        <span class="input-group-text">0.00</span>
    </div>
</div>
<!-- /input group -->
```

{% endtab %}
{% endtabs %}

### Button Addons

{% tabs %}
{% tab title="Button Addons" %}
![](/files/-Luq643IUy6TkeNIScYn)
{% endtab %}

{% tab title="Source Code" %}

```markup
<!-- Input Group -->
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <button class="btn btn-outline-primary" type="button">Button</button>
    </div>
    <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
<!-- /input group -->

<!-- Input Group -->
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
    <div class="input-group-append">
        <button class="btn btn-outline-primary" type="button">Button</button>
    </div>
</div>
<!-- /input group -->

<!-- Input Group -->
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <button class="btn btn-outline-primary" type="button">Button</button>
        <button class="btn btn-outline-primary" type="button">Button</button>
    </div>
    <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
<!-- /input group -->

<!-- Input Group -->
<div class="input-group">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
    <div class="input-group-append">
        <button class="btn btn-outline-primary" type="button">Button</button>
        <button class="btn btn-outline-primary" type="button">Button</button>
    </div>
</div>
<!-- /input group -->
```

{% endtab %}
{% endtabs %}

### Buttons with dropdowns

{% tabs %}
{% tab title="Buttons with Dropdown" %}
![](/files/-Luq7M9_QKmghQI81cA1)
{% endtab %}

{% tab title="Source Code" %}

```markup
<!-- Input Group -->
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>

        <!-- Dropdown Menu -->
        <div class="dropdown-menu">
            <a class="dropdown-item" href="javascript:void(0)">Action</a>
            <a class="dropdown-item" href="javascript:void(0)">Another action</a>
            <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
        </div>
        <!-- /dropdown menu -->

    </div>
    <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
<!-- /input group -->

<!-- Input Group -->
<div class="input-group">
    <input type="text" class="form-control" aria-label="Text input with dropdown button">
    <div class="input-group-append">
        <button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>

        <!-- Dropdown Menu -->
        <div class="dropdown-menu">
            <a class="dropdown-item" href="javascript:void(0)">Action</a>
            <a class="dropdown-item" href="javascript:void(0)">Another action</a>
            <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
        </div>
        <!-- /dropdown menu -->

    </div>
</div>
<!-- /input group -->
```

{% endtab %}
{% endtabs %}

### Segmented buttons

{% tabs %}
{% tab title="Segmented button" %}
![](/files/-Luq9XIcAcGUTj49yV1N)
{% endtab %}

{% tab title="Source Code" %}

```markup
<!-- Input Group -->
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <button type="button" class="btn btn-outline-primary">Action</button>
        <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only">Toggle Dropdown</span>
        </button>

        <!-- Dropdown Menu -->
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
        <!-- /dropdown menu -->

    </div>
    <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>
<!-- /input group -->

<!-- Input Group -->
<div class="input-group">
    <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
    <div class="input-group-append">
        <button type="button" class="btn btn-outline-primary">Action</button>
        <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only">Toggle Dropdown</span>
        </button>

        <!-- Dropdown Menu -->
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
        <!-- /dropdown menu -->

    </div>
</div>
<!-- /input group -->
```

{% endtab %}
{% endtabs %}

### Custom select

{% tabs %}
{% tab title="Custom Select" %}
![](/files/-LuqA6BhS-_9yCIpNEQM)
{% endtab %}

{% tab title="Source Code" %}

```markup
<!-- Input Group -->
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <label class="input-group-text" for="inputGroupSelect01">Options</label>
    </div>
    <select class="custom-select" id="inputGroupSelect01">
        <option selected="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</div>
<!-- /input group -->

<!-- Input Group -->
<div class="input-group mb-3">
    <select class="custom-select" id="inputGroupSelect02">
        <option selected="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <div class="input-group-append">
        <label class="input-group-text" for="inputGroupSelect02">Options</label>
    </div>
</div>
<!-- /input group -->

<!-- Input Group -->
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <button class="btn btn-outline-primary" type="button">Button</button>
    </div>
    <select class="custom-select" id="inputGroupSelect03">
        <option selected="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</div>
<!-- /input group -->

<!-- Input Group -->

<div class="input-group">
    <select class="custom-select" id="inputGroupSelect04">
        <option selected="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <div class="input-group-append">
        <button class="btn btn-outline-primary" type="button">Button</button>
    </div>
</div>
<!-- /input group -->
```

{% endtab %}
{% endtabs %}

### Custom file input

{% tabs %}
{% tab title="Custom file input" %}
![](/files/-LuqAwKt9OnY18-jCCL6)
{% endtab %}

{% tab title="Source Code" %}

```markup
<!-- Input Group -->
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">Upload</span>
    </div>
    <div class="custom-file">
        <input type="file" class="custom-file-input" id="inputGroupFile01">
        <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
    </div>
</div>
<!-- /input group -->

<!-- Input Group -->
<div class="input-group mb-3">
    <div class="custom-file">
        <input type="file" class="custom-file-input" id="inputGroupFile02">
        <label class="custom-file-label" for="inputGroupFile02">Choose file</label>
    </div>
    <div class="input-group-append">
        <span class="input-group-text">Upload</span>
    </div>
</div>
<!-- /input group -->

<!-- Input Group -->
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <button class="btn btn-outline-primary" type="button">Button</button>
    </div>
    <div class="custom-file">
        <input type="file" class="custom-file-input" id="inputGroupFile03">
        <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
    </div>
</div>
<!-- /input group -->

<!-- Input Group -->

<div class="input-group">
    <div class="custom-file">
        <input type="file" class="custom-file-input" id="inputGroupFile04">
        <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
    </div>
    <div class="input-group-append">
        <button class="btn btn-outline-primary" type="button">Button</button>
    </div>
</div>
<!-- /input group -->
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-drift.g-axon.work/components/input-group.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.