Registry Index

Search the catalog

Type to search items across every indexed registry, or pick a page.

ComponentReactregistry:ui3 dependencies

Input Group

input-group

Composable input shell: InputGroup carries the field appearance with 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg) and 3 tones (neutral, success, danger); InputGroupInput/InputGroupTextarea render transparent controls inside; InputGroupAddon places icons, text or buttons at inline-start, inline-end, block-start or block-end; InputGroupText and InputGroupButton for addon content.

Live, loading

Starting the live preview…

Runs in a sandboxed frame on a separate origin, in its registry's own theme. Mounted with no props — an item that paints an empty box is given its name as text, and some items need input to show anything.

Notes from the author

Use for icons or actions inside a text field: leading search icon, trailing clear button, kbd hints, prefixes like https://. Focus and invalid state lift from the inner control to the group border. Use FileInput for file uploads instead.
6 other registries

Similar components

Other registries' take on input-group.

1 demo

See it in use

Files this registry ships to demonstrate the item. They are indexed and installable, but they don't count as components of their own.

Usage example for the ai2 input-group component.

@ai2

More from @ai2