# Input Group ```mdx
12 results
``` ## Usage Import Tailwind and one full Basecoat style bundle. ```css @import "tailwindcss"; @import "basecoat-css/vega.css"; ``` Or import only the base CSS, Input Group component CSS, and one style pack. ```css @import "tailwindcss"; @import "basecoat-css/base.css"; @import "basecoat-css/components/input-group.css"; @import "basecoat-css/styles/vega.css"; ``` Using CDN or bundler imports? See the [Installation page](/installation). ```html
12 results
``` Add `class="input-group"` to the root. Native controls stay semantic and become borderless children inside that shell.
<div class="input-group">
The root shell. Add role="group" and an accessible label only when the group itself needs to be named.
<input>, <textarea>, <select>
The native control. Use aria-invalid="true" for invalid state and disabled for disabled state.
<span>, <svg>, <kbd>
Decorative or helper content. Use aria-hidden="true" for decorative icons.
<button>, <div role="group">
Interactive actions. Use role="group" with an accessible label when multiple related actions share one side of the input.
<header>, <footer>
Header or footer addon rows for vertically oriented input groups.
data-align="start|end"
Optional visual placement. Values use logical direction, so start/end automatically flip in RTL. Use data-orientation="vertical" on the root for header/footer layouts.
[data-control]
Escape hatch for custom controls that are not native input, textarea, or select.
## Examples Use `data-align="start|end"` on addon wrappers to position them inline. Use `data-orientation="vertical"` with `header` or `footer` for block placement. ### Inline start ```mdx

Icon positioned at the start.

``` ### Inline end ```mdx

Icon positioned at the end.

``` ### Block start ```mdx
Full Name

Header positioned above the input.

script.js

Header positioned above the textarea.

``` ### Block end ```mdx
USD

Footer positioned below the input.

0/280

Footer positioned below the textarea.

``` ### Icon ```mdx
``` ### Text ```mdx
$ USD
https:// .com
@company.com
``` ### Button ```mdx
https://
``` ### Kbd ```mdx
⌘K
``` ### Dropdown ```mdx
``` ### Spinner ```mdx
Saving...
Please wait...
``` ### Textarea ```mdx
script.js
``` ### Custom input ```mdx
``` ### RTL ```mdx
١٢ نتيجة
جاري الحفظ...
٠/٢٨٠

تذييل موضع أسفل منطقة النص.

```