ProductUI Input - PrimerBlazor

Basic Input

<PrimerInput Type="InputType.Search"
                Size="InputSize.Small"
                Value="@basicInput"
                ValueChanged="v => basicInput = v"
                Placeholder="Search issues">
    <LeadingIcon>
        <PrimerIcon Icon="IconName.Check16" Size="IconSize.Small" Color="IconColor.Muted" />
    </LeadingIcon>
</PrimerInput>

Input with Trailing Icon

<PrimerInput Type="InputType.Search"
                Size="InputSize.Small"
                Value="@trailingInput"
                ValueChanged="v => trailingInput = v"
                Placeholder="Search issues">
    <TrailingIcon>
        <PrimerIcon Icon="IconName.Search16" Size="IconSize.Small" Color="IconColor.Muted" />
    </TrailingIcon>
</PrimerInput>

Input with Suffix

days

<PrimerInput Type="InputType.Number"
                Placeholder="90"
                Value="@suffixInput"
                ValueChanged="v => suffixInput = v"
                Suffix="days"
                ShowClearButton="false"
                Size="InputSize.Large" />

Input Group with Trailing Button

<PrimerInputGroup>
    <ChildContent>
        <PrimerInput Placeholder="Search Issues"
                        Value="@groupTrailingInput"
                        ValueChanged="v => groupTrailingInput = v" />
    </ChildContent>
    <TrailingTemplate>
        <PrimerIconButton Icon="IconName.Search16" Size="ButtonSize.Small" />
    </TrailingTemplate>
</PrimerInputGroup>

Input Group with Leading ActionPanel

<PrimerInputGroup>
    <LeadingTemplate>
        <PrimerActionPanel Title="Select Multiple Types"
                            ButtonText="Select"
                            Items="@filters"
                            ButtonSize="ButtonSize.Small"
                            IsLinkMode="false"
                            ShowCloseButton="false"
                            MultipleSelection="true"
                            OnItemsSelected="HandleMultiSelect" />
    </LeadingTemplate>
    <ChildContent>
        <PrimerInput Type="InputType.Search"
                        Size="InputSize.Small"
                        Value="@groupLeadingInput"
                        ValueChanged="v => groupLeadingInput = v"
                        Placeholder="Search issues">
            <TrailingIcon>
                <PrimerIcon Icon="IconName.Search16" Size="IconSize.Small" Color="IconColor.Muted" />
            </TrailingIcon>
        </PrimerInput>
    </ChildContent>
</PrimerInputGroup>

Input Group with Leading Select

<PrimerInputGroup>
    <LeadingTemplate>
        <PrimerSelect @bind-Value="selectedOption" Size="SelectSize.Small">
            <PrimerSelectOption value="">Please select</PrimerSelectOption>
            <PrimerSelectOption value="one">Choice one</PrimerSelectOption>
            <PrimerSelectOption value="two">Choice two</PrimerSelectOption>
        </PrimerSelect>
    </LeadingTemplate>
    <ChildContent>
        <PrimerInput Type="InputType.Search"
                        Size="InputSize.Small"
                        Value="@groupLeadingSelectInput"
                        ValueChanged="v => groupLeadingSelectInput = v"
                        Placeholder="Search issues">
            <TrailingIcon>
                <PrimerIcon Icon="IconName.Search16" Size="IconSize.Small" Color="IconColor.Muted" />
            </TrailingIcon>
        </PrimerInput>
    </ChildContent>
</PrimerInputGroup>

Input Options

Available options for PrimerInput

Name	Description	Default Value
Value	Input value	-
Placeholder	Placeholder text shown when empty	-
Type	Input type: Text, Number, Password, Email, Search	Text
Size	Input size: Small, Medium, Large	Medium
State	Visual state: Default, Invalid, Valid, Disabled	Default
BgColor	Background color theme: CanvasSubtle, Success, Danger, etc.	CanvasSubtle
Suffix	Optional text displayed at the end of input	-
LeadingIcon	Icon displayed before the input (left)	-
TrailingIcon	Icon displayed after the input (right)	-
ShowClearButton	If true, shows a clear (X) button	false
Disabled	If true, disables the input field	false
MaxLength	Maximum allowed input length	100
AutoComplete	HTML autocomplete attribute (e.g., off, on)	off
Spellcheck	If true, enables spellcheck	false
Name	Name attribute of the input	-
AriaLabel	ARIA label for accessibility	-
Description	Helper text shown below the input	-
ValidationMessage	Error message shown when validation fails	-
ClassName	Custom class added to input	-
Style	Inline CSS style	-

private string basicInput = "";
private string trailingInput = "";
private string suffixInput = "";
private string groupTrailingInput = "";
private string groupLeadingInput = "";
private string groupLeadingSelectInput = "";
private string selectedOption = "";

List<FilterItem> filters = new()
{
    new() { Text = "Open issues", Link = "javascript:void(0);" },
    new() { Text = "Your issues", Link = "javascript:void(0);" },
    new() { Text = "Your pull requests", Link = "javascript:void(0);" },
    new() { Text = "Assigned to you", Link = "javascript:void(0);" },
};