Input Group
Input Group
Enhance inputs with icons, text, and action buttons.
Basic Examples
Add icons and text to inputs for better context.
Text Addons
Add text prefixes, suffixes, and labels to inputs.
Action Buttons
Integrate action buttons directly into inputs.
Form Validation
Show validation states with icons and colors.
Username is available
Please enter a valid email address
Verifying...
Advanced Examples
Combine multiple features for complex use cases.
Dropdown Menu
Integrate dropdown menus with input fields for context actions.
Code Editor
Create code editor interfaces with header and footer toolbars.
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Align | InputGroupAlign | — | On InputGroupAddon: position of the addon. Options: InlineStart, InlineEnd, BlockStart, BlockEnd. |
| Class | string? | null | Additional CSS classes. |
| ChildContent | RenderFragment? | null | Content of the component. |
| Variant | ButtonVariant | Default | On InputGroupButton: button visual variant. |
| Placeholder | string? | null | On InputGroupInput / InputGroupTextarea: placeholder text. |
| Rows | int | 3 | On InputGroupTextarea: number of visible rows. |