Input Group

Combine inputs with icons, text, buttons, and other addons.

Default

A basic input group with a search icon addon.

<InputGroup>
    <InputGroupInput Placeholder="Search..." />
    <InputGroupAddon>
        <InputGroupText>
            <!-- Search icon -->
            <svg>...</svg>
        </InputGroupText>
    </InputGroupAddon>
</InputGroup>

Addon — Inline Start

Use Align="InputGroupAlign.InlineStart" (default) to position the addon before the input.

<InputGroup>
    <InputGroupInput Placeholder="Email address" Type="email" />
    <InputGroupAddon Align="InputGroupAlign.InlineStart">
        <InputGroupText>
            <!-- Mail icon -->
            <svg>...</svg>
        </InputGroupText>
    </InputGroupAddon>
</InputGroup>

Addon — Inline End

Use Align="InputGroupAlign.InlineEnd" to position the addon after the input.

USD
<InputGroup>
    <InputGroupInput Placeholder="Enter amount" Type="number" />
    <InputGroupAddon Align="InputGroupAlign.InlineEnd">
        <InputGroupText>USD</InputGroupText>
    </InputGroupAddon>
</InputGroup>

Addon — Both Sides

Combine InlineStart and InlineEnd addons on the same input.

<InputGroup>
    <InputGroupInput Placeholder="https://example.com" />
    <InputGroupAddon Align="InputGroupAlign.InlineStart">
        <InputGroupText>
            <!-- Globe icon -->
            <svg>...</svg>
        </InputGroupText>
    </InputGroupAddon>
    <InputGroupAddon Align="InputGroupAlign.InlineEnd">
        <InputGroupButton>
            <!-- Copy icon -->
            <svg>...</svg>
            Copy
        </InputGroupButton>
    </InputGroupAddon>
</InputGroup>

With Button

Use InputGroupButton inside addons for interactive actions like password visibility toggle.

<InputGroup>
    <InputGroupInput Placeholder="Enter password"
                     Type="@(showPassword ? "text" : "password")" />
    <InputGroupAddon Align="InputGroupAlign.InlineEnd">
        <InputGroupButton Size="InputGroupButtonSize.IconXs"
                          @@onclick="TogglePassword">
            <!-- Eye / EyeOff icon -->
            <svg>...</svg>
        </InputGroupButton>
    </InputGroupAddon>
</InputGroup>

@code {
    private bool showPassword = false;

    private void TogglePassword()
    {
        showPassword = !showPassword;
    }
}

With Text

Display static text like currency symbols or prefixes alongside the input.

$
.00
@
<!-- Currency input -->
<InputGroup>
    <InputGroupInput Placeholder="0.00" Type="number" />
    <InputGroupAddon Align="InputGroupAlign.InlineStart">
        <InputGroupText>$</InputGroupText>
    </InputGroupAddon>
    <InputGroupAddon Align="InputGroupAlign.InlineEnd">
        <InputGroupText>.00</InputGroupText>
    </InputGroupAddon>
</InputGroup>

<!-- Username input -->
<InputGroup>
    <InputGroupInput Placeholder="username" />
    <InputGroupAddon Align="InputGroupAlign.InlineStart">
        <InputGroupText>@@</InputGroupText>
    </InputGroupAddon>
</InputGroup>

With Kbd

Show keyboard shortcuts inside the input group.

⌘K 
<InputGroup>
    <InputGroupInput Placeholder="Search documentation..." />
    <InputGroupAddon Align="InputGroupAlign.InlineStart">
        <InputGroupText>
            <!-- Search icon -->
            <svg>...</svg>
        </InputGroupText>
    </InputGroupAddon>
    <InputGroupAddon Align="InputGroupAlign.InlineEnd">
        <kbd class="pointer-events-none inline-flex h-5 ..."
             >⌘K</kbd>
    </InputGroupAddon>
</InputGroup>

Textarea — Block End

Use InputGroupTextarea with block-end alignment for message inputs with action buttons.

<InputGroup>
    <InputGroupTextarea Placeholder="Type your message..." Rows="3" />
    <InputGroupAddon Align="InputGroupAlign.BlockEnd">
        <InputGroupText>
            <!-- Paperclip icon -->
            <svg>...</svg>
        </InputGroupText>
        <InputGroupButton>Send</InputGroupButton>
    </InputGroupAddon>
</InputGroup>

Textarea — Block Start

Use block-start to position the addon above the textarea.

Comment
<InputGroup>
    <InputGroupTextarea Placeholder="Write a comment..." Rows="3" />
    <InputGroupAddon Align="InputGroupAlign.BlockStart">
        <InputGroupText>
            <!-- MessageSquare icon -->
            <svg>...</svg>
        </InputGroupText>
        <span class="text-xs">Comment</span>
    </InputGroupAddon>
</InputGroup>

Disabled

Disable the input to apply disabled styling to the entire group.

<InputGroup>
    <InputGroupInput Placeholder="Disabled input" Disabled="true" />
    <InputGroupAddon>
        <InputGroupText>
            <!-- Lock icon -->
            <svg>...</svg>
        </InputGroupText>
    </InputGroupAddon>
</InputGroup>

Two-way Binding

InputGroupInput supports two-way data binding.

Value: 

<InputGroup>
    <InputGroupInput Placeholder="Type something..."
                     @@bind-Value="bindingValue" />
    <InputGroupAddon Align="InputGroupAlign.InlineStart">
        <InputGroupText>
            <!-- Edit icon -->
            <svg>...</svg>
        </InputGroupText>
    </InputGroupAddon>
</InputGroup>
<p>Value: <strong>@@bindingValue</strong></p>

@code {
    private string bindingValue = "";
}