---
title: Input group
description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
toc: true
---

## Basic example

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 code={`
    @

    @example.com

    Your vanity URL
    
      https://example.com/users/

Example help text goes outside the input group.

    $
    
    .00

    @

    With textarea

`} />

## Wrapping

Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`.

<Example code={`
    @

`} />

## Border radius

Due to limitations of browser support at the time, `border-radius` styles can only be applied to the first and last children within the `.input-group` class. Any non-visible element in one of those positions will cause the input group to render incorrectly. This will unfortunately not be fixed until v6 most likely.

<Example code={`
    @

`} />

## 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.

**Sizing on the individual input group elements isn’t supported.**

<Example code={`
    Small

    Default

    Large

`} />

## Checkboxes and radios

Place any checkbox or radio option within an input group’s addon instead of text. We recommend adding `.mt-0` to the `.form-check-input` when there’s no visible text next to the input.

<Example code={`

`} />

## Multiple inputs

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

<Example code={`
    First and last name

`} />

## Multiple addons

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

<Example code={`
    $
    0.00

    $
    0.00
  
`} />

## Button addons

<Example code={`
    Button

    Button

    Button
    Button

    Button
    Button
  
`} />

## Buttons with dropdowns

<Example code={`
    Dropdown

- Action
      
- Another action
      
- Something else here
      
- 

- Separated link

    Dropdown

- Action
      
- Another action
      
- Something else here
      
- 

- Separated link

    Dropdown

- Action before
      
- Another action before
      
- Something else here
      
- 

- Separated link

    Dropdown

- Action
      
- Another action
      
- Something else here
      
- 

- Separated link

`} />

## Segmented buttons

<Example code={`
    Action
    
      Toggle Dropdown

- Action
      
- Another action
      
- Something else here
      
- 

- Separated link

    Action
    
      Toggle Dropdown

- Action
      
- Another action
      
- Something else here
      
- 

- Separated link

`} />

## Custom forms

Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.

### Custom select

<Example code={`
    Options
    
      Choose...
      One
      Two
      Three

      Choose...
      One
      Two
      Three
    
    Options

    Button
    
      Choose...
      One
      Two
      Three

      Choose...
      One
      Two
      Three
    
    Button
  
`} />

### Custom file input

<Example code={`
    Upload

    Upload

    Button

    Button
  
`} />

## CSS

### Sass variables

<ScssDocs name="input-group-variables" file="scss/_variables.scss" />
