For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/input-group.md.
A3S UI
  • English
  • next

      • Input Group

      Input Group presents one editable value and the context needed to interpret or act on that value inside one continuous boundary. It does not replace Field, validation, suggestions, rich editing, or application state.

      Project search
      No query entered

      Search by project name or repository path.

      Usage

      Import Tailwind and one complete A3S UI style bundle:

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

      For component-level loading, import the base styles, Input Group structure, Field structure, one visual style, and the small behavior controller:

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

      Use one direct primary control. Keep its persistent label, ordinary guidance, and current error in the surrounding Field. The root has no default widget role because the native control already owns the name, value, keyboard behavior, and form semantics.

      <div class="field">
  <label for="repository-filter">Repository filter</label>
  <div class="input-group">
    <input id="repository-filter" name="repositoryFilter" aria-describedby="repository-filter-help" />
    <span data-align="inline-start" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none">...</svg></span>
    <span data-align="inline-end">8 matches</span>
  </div>
  <p id="repository-filter-help" data-field-description>Search by repository name or path.</p>
</div>

      Use a standalone Input or Textarea when no content needs the same boundary. Use Combobox for selectable suggestions, an editor for structured content, and Task Composer for mentions, attachments, tools, and submission state.

      Parameters

      ParameterPurpose
      .input-groupProvides the shared visual and pointer-focus boundary; it does not become a form control
      Direct input, textarea, select, or [data-control]Supplies the one primary value, native semantics, focus, and submission behavior
      `data-align="inline-startinline-end"`
      `data-align="block-startblock-end"`
      data-orientation="vertical"Retains compatibility for authored vertical groups; block alignment already produces the layout
      aria-busy="true"Identifies in-progress host work without disabling the editable value
      data-disabled, data-readonlyOptional shell styling mirrors; native disabled or readonly remains the semantic source of truth
      data-input-group-statusIdentifies bounded result or progress text; add role="status" only when changes should be announced

      Legacy start and end remain aliases for inline-start and inline-end. New markup should use the explicit logical values.

      States and variants

      Empty and ready are ordinary value states. Invalid begins after a validation attempt. Loading preserves the current value and editability. Disabled and read-only use different native behavior and must never be reduced to the same dimmed appearance.

      Validation and recovery

      Input Group reflects validity but does not invent validation policy. Preserve the attempted value, focus the invalid control, name the exact correction outside the shell, and add the error ID to aria-describedby. Clear stale error semantics after a valid edit or reset. Do not validate while an IME composition is active.

      Workspace address

      Use 3 to 24 lowercase letters, numbers, or hyphens.

      Server validation, sanitization, authorization, and stale-response handling remain required. Client constraints only improve local recovery.

      Bounded actions

      An action belongs inside the boundary only when it directly inspects, reveals, copies, clears, chooses a unit for, or submits the same value. Interactive descendants retain their own focus and activation; the shell controller never redirects their click.

      Repository URL

      Read-only values remain selectable and included in form submission.

      Ready to copy

      Disabled and read-only

      Disabled removes focus, editing, validation, and form submission. Read-only preserves focus, selection, copying, and submission. Keep both legible and explain why the value cannot be changed.

      Availability semantics

      Archived projects keep their audit value but cannot change or submit it.

      Release policy locks editing; the value remains selectable and submitted.

      Bounded multiline input

      A native Textarea may share the boundary with one compact count or directly related action. The editing viewport stays bounded, scrolls internally after large pastes, and supports vertical native resize. Use an editor or Task Composer when the task needs structure, syntax, mentions, attachments, or a toolbar.

      Release handoff
      0 / 6000 characters

      Include the verification result and the exact recovery steps to use after failure.

      RTL and long content

      Logical alignment follows the surrounding writing direction. Technical values such as URLs or paths may set a local left-to-right direction. Inline addons truncate before they can widen the document; move meaningful long guidance outside the shell or to a block addon.

      RTL project search
      8 مشاريع مطابقة

      ابحث باسم المشروع أو مسار المستودع.

      Accessibility

      • Keep one persistent visible label and associate ordinary guidance through aria-describedby. Placeholder text never provides the only name.
      • Leave the root without a widget role unless the composition has a real group relationship that the control and Field cannot express.
      • Preserve native input, selection, paste, undo, search clearing, password-manager, autocomplete, and IME behavior.
      • Use exact accessible names for icon-only actions. On coarse pointers, editable text stays at least 16px and actions provide at least a 44 by 44 CSS-pixel target.
      • Invalid state needs the native constraint, aria-invalid="true", a specific error, and a recovery path. Color alone is insufficient.
      • Loading keeps the value and focus stable, uses one bounded status message, and must not let a stale response overwrite newer input.
      • Forced-colors mode replaces inset focus styling with a system Highlight outline. Test real mobile keyboards, physical CJK input methods, 200% zoom, touch selection, Windows forced colors, and screen-reader/browser combinations before release.