Input Group
Icons, text and buttons inside a field's border. The whole group glows while the control in it has focus.
Installation
npx shadcn@latest add @afterglow/input-groupComposition
Component structure.
- InputGroupInput
- InputGroupTextarea
- InputGroupAddon
- InputGroupText
- InputGroupButton
Inline start
align="inline-start" puts the addon before the text. It is the default.
Icon positioned at the start.
Inline end
align="inline-end" puts it after.
Icon positioned at the end.
Block start
align="block-start" stacks the addon above the control, as a header.
Header positioned above the input.
Header positioned above the textarea.
Block end
align="block-end" stacks it below, as a footer.
Footer positioned below the input.
Footer positioned below the textarea.
Icon
Text
Button
InputGroupButton is a ghost button cut down to fit inside the field. The info button is itself the popover trigger, passed to PopoverTrigger through render.
Kbd
Dropdown
Spinner
Textarea
A header and footer around a textarea, split off by a border on each addon.
Custom input
Any control can sit in the group. Give it data-slot="input-group-control" and the group lights up when it has focus. This one is a plain textarea that grows with field-sizing-content.
API Reference
Put each InputGroupAddon after the control in the markup and move it with align. Tab order then reaches the field before anything in the addon.
InputGroup
Draws the border, and reads focus and aria-invalid off whichever child has data-slot="input-group-control".
InputGroupAddon
A click on the addon outside any button focuses the control.
| Prop | Type | Default |
|---|---|---|
| align | "inline-start" | "inline-end" | "block-start" | "block-end" | "inline-start" |