Input Group

Enhance inputs with icons, text, and action buttons.

Basic Examples

Add icons and text to inputs for better context.

Username

@company.com

Website

https://

Text Addons

Add text prefixes, suffixes, and labels to inputs.

Price

USD

Website

https://

Weight

Action Buttons

Integrate action buttons directly into inputs.

API Key

Newsletter

Form Validation

Show validation states with icons and colors.

Username

Username is available

Please enter a valid email address

Verification Code

Verifying...

Advanced Examples

Combine multiple features for complex use cases.

Advanced Search

Transfer Amount

Comment

Max 500 characters

Dropdown Menu

Integrate dropdown menus with input fields for context actions.

File Name

Code Editor

Create code editor interfaces with header and footer toolbars.

script.js

Line 1, Column 1

Usage

@using BlazorUI.Components.InputGroup
@using BlazorUI.Components.Input

<!-- Icon at start -->
<InputGroup>
    <InputGroupAddon Align="InputGroupAlign.InlineStart">
        <SearchIcon Size="16" />
    </InputGroupAddon>
    <InputGroupInput Placeholder="Search..." />
</InputGroup>

<!-- Button at end -->
<InputGroup>
    <InputGroupInput Placeholder="Enter email" />
    <InputGroupAddon Align="InputGroupAlign.InlineEnd">
        <InputGroupButton>Subscribe</InputGroupButton>
    </InputGroupAddon>
</InputGroup>

<!-- Icons on both sides -->
<InputGroup>
    <InputGroupAddon Align="InputGroupAlign.InlineStart">
        <MailIcon Size="16" />
    </InputGroupAddon>
    <InputGroupInput Type="InputType.Email" Placeholder="name@example.com" />
    <InputGroupAddon Align="InputGroupAlign.InlineEnd">
        <CheckCircle2Icon Size="16" />
    </InputGroupAddon>
</InputGroup>