Input Group
A container that groups input controls with icons, buttons, and text addons in a unified visual frame. Use it to build search bars, URL inputs, currency fields, password toggles, and any input that needs decorative or functional attachments.
With Icon (Start)
Place an icon at the start of the input using
InputGroupAddon with InlineStart alignment. The addon content is positioned inside the input's visual border, creating a seamless integrated look. This pattern is common for search bars and filtered inputs.With Icon (End)
Place an icon at the end of the input using
InputGroupAddon with InlineEnd alignment. End-positioned icons work well for status indicators, validation icons, or visual cues about the input's expected content type.With Button
Use
InputGroupButton inside an InputGroupAddon to attach an action button to the input. The button inherits the group's visual style and fires the OnClick event. This pattern is ideal for newsletter subscriptions, search submissions, and inline form actions.With Text Addon
Use
InputGroupText to display static text like URL protocols, currency symbols, or unit labels. Text addons render in muted foreground and smaller font to visually distinguish them from the editable input content. Multiple text addons can be used on either side.Both Sides
Combine
InputGroupAddon on both InlineStart and InlineEnd sides simultaneously. This example shows a currency input with a dollar sign prefix and a dropdown button suffix, demonstrating how multiple addons coexist within a single group.With Textarea
Use
InputGroupTextarea for multi-line input with addons. The BlockEnd alignment places the addon below the textarea, which is ideal for character counters, submission buttons, or formatting toolbars. The textarea integrates seamlessly with the group's border and focus styles.Password Toggle
A password input with a visibility toggle button that switches between
Password and Text input types. The lock icon on the start provides a visual cue, while the eye/eye-off toggle on the end lets users reveal their password. This is a common pattern in login and registration forms.Custom Variant
Use the
Class parameter on InputGroup to apply custom Tailwind CSS classes to the outer container. This example demonstrates a rounded-full search bar with a primary border accent, useful for hero sections, landing page search fields, or branded input designs.Registration Form
A real-world composition showing multiple
InputGroup components in a registration form with EditForm validation. Each group pairs an icon addon with a bound input, and ValidationMessage displays field-level errors. The OnValidSubmit callback fires only when all validation passes.Public Methods
Both InputGroupInput and InputGroupTextarea expose the following method. Use a component reference (@ref) to call this method programmatically.
| Method | Returns | Description |
|---|---|---|
| FocusAsync() | ValueTask | Moves keyboard focus to the underlying input element. Call via @ref — no JS interop needed. |
Both components also expose a public Element property of type ElementReference that points at the underlying input or textarea element, for advanced JS interop scenarios.