Input group
An input or textarea with icons, fixed text and small actions inside the same border. Clicking an addon focuses the field.
bunx --bun shadcn@4.17.0 add @waimakers/input-group- npm dependencies
- class-variance-authority@0.7.1lucide-react@1.33.0
From the registry
Input and textarea groups with icons, suffixes and actions. InputGroupClear calls onClear to update the value, then returns focus to the control.
Examples
Search with clear
A leading icon and a clear button. Clear empties the value and keeps focus in the field.
Prefix and suffix
Fixed text that is part of the value's meaning but not something people type.
Lowercase letters and hyphens.
With an action
A read-only command with a copy action, the common case for CLI hints.
Textarea
A block-end addon carries the status and the save action under the text.
Saved
States
Invalid and disabled. Press Tab into a group to see the focus ring: it wraps the whole group, not the inner input.
Enter a whole number above zero.