# 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 or 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. This slots will be wrapped by `` to display correctly. ```html
Username Action A Action B
``` ### Using 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, use the `` subcomponent inside the `` or ``. ## Checkbox and radio addons Place any native checkbox or radio within an input group's addon instead of text. **Note:** you must use native radio and checkbox inputs, as `` and `` include additional markup not required in input groups. ```html ``` ## Dropdowns ```html Action A Action B Action C Action D ``` ## Multiple addons Multiple add-ons are supported and can be mixed with checkbox and radio input versions. ```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. To control width, place the input inside standard Bootstrap grid column. ```html
Button
``` ## 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.