Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
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.
Loading example…
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.
Loading example…
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.
Loading example…
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.
Loading example…
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.
Loading example…
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.
Loading example…
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.
Loading example…
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.
Loading example…
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.
Loading example…
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.