Skip to content
FelicityUI

Input Group

Add addons, buttons, and helper content to inputs.

.com

Installation

terminal
npx felicityui add input-group --platform react

Usage

example.tsx
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"
import { SearchIcon } from "lucide-react"

<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

Composition

InputGroup
├── InputGroupInput or InputGroupTextarea
├── InputGroupAddon
├── InputGroupButton
└── InputGroupText

Default

Search addon, suffix text, icon, and textarea footer.

.com

Inline start

Inline end

.com

Block start

Summary

Block end

Icon

Text

https://
USD

Button

Kbd

⌘K

Spinner

Saving

Textarea

0/240

Custom input

Use data-slot=input-group-control on custom controls.

RTL

.com

API Reference

PropTypeDefaultDescription
align"inline-start" | "inline-end" | "block-start" | "block-end"—InputGroupAddon visual position.
size"xs" | "sm" | "icon-xs" | "icon-sm"—InputGroupButton size.
variantButtonVariant | "default"—InputGroupButton variant (default maps to primary).

Accessibility

WCAG 2.2 AA

  • Root uses role=group.
  • Addon click focuses the group control unless a button was clicked.
  • Visible focus on input-group-control.

Platform notes

React

Composition around Input/Textarea/Button with Felicity tokens — not Base UI / Radix runtime.

  • Client component (addon focus redirect).
  • Uses data-slot=input-group|input-group-addon|input-group-control|input-group-button|input-group-text.
  • Place InputGroupAddon after the control in the DOM; use align for visual position.
  • Custom controls should set data-slot=input-group-control for focus styling.