# Input Groups Using the `` component you can easily extend form controls by adding various elements such as text, buttons and button groups. ## Basic Input Groups :::demo ```html

Check

``` ::: ## Prepending and Appending via Props The simplest way of attaching addons to your inputs would be by using the `prepend` or `append` props on the `` component. :::demo ```html

``` ::: ## Using Named Slots If you'd like better control over your input group's contents, you can also use the `prepend` or `append` slots. :::demo ```html

Total Amount

``` ::: ## Using Input Group Addons You can also use the `` component with the `append` or `prepend` props for more flexibility. :::demo ```html

Delete

Create

``` ::: ## Input Group Dropdowns > Note: Using dropdowns inside input groups are currently not supported, but available on the [roadmap](/roadmap). :::demo ```html

Action A

Action B

``` ::: ## Plain Checkboxes and Radios :::demo ```html

``` ::: ## Sizing You can control the sizing of the `` component using the `size` prop with the `sm` value for small input groups and `lg` for large input groups. :::demo ```html

``` ::: ## Seamless Input Groups You can create seamless input groups using the `seamless` prop. :::demo ```html

``` :::