Inputs/Input Group

Input Group

Combines input with prefix/suffix elements.

Themed

When to Use

Use Input Group when you need to:

  • Add context to input fields with icons, labels, or units
  • Combine inputs with action buttons (search, copy, submit)
  • Display prefix/suffix text like currency symbols or domain names
  • Group related form controls visually (quantity with +/- buttons)
  • Provide inline help via tooltips without cluttering the UI

When Not to Use

  • Simple inputs without addons - use Input directly
  • Multi-line text without addons - use Textarea instead
  • Complex form layouts - consider separate components with proper spacing
  • Search with autocomplete results - use a dedicated Combobox

Default

Input groups combine inputs with icons, text, and buttons for enhanced functionality.

12 results
https://

With Icons

Add icons to indicate input purpose or provide visual feedback.

With Text

Display additional text information alongside inputs, like currency symbols or domain suffixes.

$
USD
https://
.com
@company.com

With Buttons

Add interactive buttons for actions like copy, toggle favorites, or search.

https://

With Tooltips

Provide additional context or help information via tooltips.

With Textarea

Input groups also work with textareas. Use block-start or block-end alignment.

Line 1, Column 1
120 characters left

With Dropdown

Pair input groups with dropdown menus for complex interactions.

With Button Group

Combine input groups with button groups for prefix/suffix wrappers.

.com

UX & Design Guidelines

Visual Hierarchy

Addons should provide context, not compete for attention. Use muted colors for icons and text addons, reserving emphasis for action buttons. Keep addon content concise—long text disrupts the visual balance.

Alignment Strategy

  • inline-start / inline-end — Use with single-line inputs for horizontal addons
  • block-start / block-end — Use with textareas for vertical stacking
  • Place icons at inline-start to indicate input type (search, email)
  • Place action buttons at inline-end for natural reading flow

Responsive Behavior

Input groups maintain their structure across breakpoints. On narrow screens, consider using icon-only buttons (size="icon-xs") instead of text buttons. Use max-w-sm or similar constraints to prevent overly wide inputs on large screens.

Color & Contrast

Addon text uses text-muted-foreground for subtle distinction. Focus states apply to the entire group with a visible ring. Error states use border-destructive and ring-destructive for clear feedback.

Accessibility

Keyboard Navigation

  • Tab — Move focus between input and addon buttons
  • Enter or Space — Activate focused button
  • Escape — Close dropdown menus or tooltips
  • Arrow keys work within dropdown menus when open

Screen Reader Support

  • The container uses role="group" to announce related controls
  • Clicking non-button addons focuses the input automatically
  • Icon-only buttons must have aria-label
  • Use aria-describedby to connect helper text to the input
  • Prefix/suffix text is read before/after the input value

Focus Management

Focus indicator wraps the entire group with a 3px ring using focus-visible:ring-[3px]. This unified focus state helps users understand the group as a single control. Tab order follows DOM order—place inputs before addons for logical navigation.

Touch Targets

Addon buttons have minimum dimensions of 24×24px (size="icon-xs") or 32×32px (size="icon-sm") for comfortable touch interaction. Use the larger size on mobile-first designs.

ARIA Attributes

<InputGroup aria-labelledby="search-label">
  <InputGroupInput
    placeholder="Search..."
    aria-describedby="search-helper"
  />
  <InputGroupAddon align="inline-end">
    <InputGroupButton aria-label="Submit search">
      <Search className="size-4" />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>
<span id="search-label" className="sr-only">Search products</span>
<span id="search-helper" className="text-sm text-muted-foreground">
  Enter keywords to search
</span>

Related Components

Input

Use for simple text inputs without addons or decorations.

Textarea

Use for multi-line text input without input group features.

Button Group

Group related buttons together, often used within input group addons.

Select

Use when users need to choose from a predefined list of options.

API Reference

InputGroup

The main container that wraps inputs and addons.

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply to the input group container.
rolestring"group"ARIA role for accessibility (automatically set).

InputGroupAddon

Displays icons, text, buttons, or other content alongside inputs.

PropTypeDefaultDescription
align"inline-start" | "inline-end" | "block-start" | "block-end""inline-start"Position of the addon relative to the input.
classNamestring—Additional CSS classes to apply to the addon.

InputGroupButton

Buttons within input groups with specialized sizing.

PropTypeDefaultDescription
size"xs" | "icon-xs" | "sm" | "icon-sm""xs"Size of the button.
variant"default" | "destructive" | "outline" | "secondary" | "ghost" | "link""ghost"Visual style variant of the button.

InputGroupInput

Replacement for Input when building input groups.

PropTypeDefaultDescription
classNamestring—Additional CSS classes. All standard input props are supported.

InputGroupTextarea

Replacement for Textarea when building input groups.

PropTypeDefaultDescription
classNamestring—Additional CSS classes. All standard textarea props are supported.