# Input Groups > Easily extend form controls by adding text, buttons, or button groups on either side of textual > inputs. ```html
Button Button
``` ## Usage You can attach addons using either props, named slots and/or sub-components. ### Using `prepend` and `append` props Values will be internally wrapped by a `` to display correctly. ```html
``` ### Using named slots if you want better control over addons, you can use `prepend` and `append` slots instead. The slot content will automatically be wrapped by [`` or ``](#using-sub-components) to display correctly. ```html
``` ### Using sub-components Use the `` or `` to add arbitrary addons wherever you like, and use these components to group buttons in your input group. Single buttons must always be wrapped in these components for proper styling. ```html
Button Button Button
``` Set the `is-text` prop on `` or `` if the content is textual in nature to apply proper styling. Alternatively, place the `` subcomponent inside of the `` or ``. This also applies when you want to use on of [BootstrapVue's icons](/docs/icons). ## Supported form-controls The following are the form controls supported as the input-group's _main_ input element: - [``](/docs/components/form-input) - [``](/docs/components/form-textarea) - [``](/docs/components/form-select) - [``](/docs/components/form-file) - [``](/docs/components/form-rating) - [``](/docs/components/form-tags) - [``](/docs/components/form-spinbutton) - [``](/docs/components/form-datepicker) - [``](/docs/components/form-timepicker) **Notes:** - BootstrapVue uses custom SCSS/CSS to handling sizing the `` input when it is placed in a `` which has a [`size`](#control-sizing) specified. - BootstrapVue uses custom SCSS/CSS when `` is placed in a ``. - BootstrapVue's custom components (i.e. ``, ``, ``, etc.) require BootstrapVue's custom SCSS/CSS. ## Checkbox and radio addons Place any checkbox or radio within an input group's addon instead of text. **Note:** Bootstrap v4.x recommends using native radio and checkbox inputs over custom radios and checkboxes, but it is possible to use as `` and `` with a few utility classes applied. ### Native checkbox and radio addons ```html
``` ### Custom radio, checkbox, and switch addons Using `` and `` components as addons, using Bootstrap [utility classes](/docs/reference/utility-classes) for additional styling to get them to "fit" in the addon: ```html
Checkbox for following text input Radio for following text input Switch for following text input
``` In the above example, we have use the `.sr-only` class on a `` to visually hide the custom control's label content (while making them still accessible to screen reader users), and used the utility class `.mr-n2` to add a negative right margin to compensate for the "gutter" space between the control and the hidden label. ## Multiple inputs ```html
``` ## Multiple addons Multiple add-ons are supported and can be mixed with checkbox and radio input versions. ```html
$
``` ## Dropdown addons ```html
``` ## Control sizing Set height using the `size` prop to `sm` or `lg` for small or large respectively. There is no need to set size on the individual inputs or buttons. Note however, you _will be required_ to also set the size on dropdowns. ```html
Button
``` To control width, place the input inside standard Bootstrap grid column. ### Sizing custom radio, checkbox and switch addons If using `` or `` as addons, additional utility classes may be required to make everything fit correctly, depending on the size chosen: ```html
Checkbox for previous text input Switch for previous text input
``` Specifically, when using the `sm` size on `` you will need to add a negative bottom margin, via the use of the `.mb-n1` [utility class](/docs/reference/utility-classes). ## Contextual states Bootstrap v4 currently **does not** support contextual state styling (i.e. valid or invalid) of input groups. However, the inputs inside the input group do support contextual state.