Input Group

Input
Item

Input Group

12 results

Usage

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

Or import only the base CSS, Input Group component CSS, and one style pack.

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

Add your input group HTML

<div class="input-group">
  <input type="text" placeholder="Search..." />
  <span data-align="start" aria-hidden="true"> <!-- icon --></span>
  <span data-align="end">12 results</span>
</div>

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

Icon positioned at the start.

Inline end

Icon positioned at the end.

Block start

Full Name

Header positioned above the input.

script.js

Header positioned above the textarea.

Block end

USD

Footer positioned below the input.

0/280

Footer positioned below the textarea.

Icon

Text

$USD
https://.com
@company.com
120 characters left

Button

https://

Kbd

⌘K

Spinner

Saving…
Please wait…

Textarea

Line 1, Column 1
script.js

Custom input

RTL

١٢ نتيجة
جاري الحفظ…
٠/٢٨٠

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