#Input Group

#Usage

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/input-group.css";
@import "@a3s-lab/ui/styles/a3s.css";

<div class="input-group">
  <input type="text" aria-label="Search" 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

#Inline end

#Block start

#Block end

#Icon

#Text

#Button

#Kbd

#Dropdown

#Spinner

#Textarea

#Custom input

#RTL