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...
Focus Input or TextArea
Programaticaly focus element inside InputGroup
Advanced Examples
Combine multiple features for complex use cases.
Two-Way Binding
Two-way data binding: bind to a C# property with the bind-Value syntax.
Debounce
Debounce the input value changes to prevent rapid firing. Handled in JS, so intermediate keystrokes never round-trip.
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. |