P11Input Component

The P11Input component is a versatile wrapper around the native HTML <input> element. It provides structured handling for labels, descriptions, and two-way data binding, supporting various input types and culture-specific formatting.

Note: This component abstracts common input functionalities, making it easier to integrate standard text, number, email, or password inputs with Blazor's binding and validation systems.

P11Input Component Examples

These examples demonstrate various configurations and functionalities of the P11Input component, showcasing its flexibility for different input types, binding scenarios, and additional features.

1. Standard Text Input

A basic text input field with a label and a descriptive text.

Your Name

Please enter your full name.

Current Value: "Hello World"

Implementation


<P11Input Label="Your Name"
          @bind-Value="textValue"
          Description="Please enter your full name."
          InputType="text" />
<p>Current Value: "@textValue"</p>


private string? textValue = "Hello World";

2. Explicit Value Change Logging

This example demonstrates how to explicitly log value changes using the OnChange event. The log below will update when you finish typing and leave the input field.

Log Value Changes

Type something and then click outside the input field.

Current Logged Value: "Initial Logged Text"

Implementation


<P11Input Label="Log Value Changes"
          @bind-Value="loggedTextValue"
          Description="Type something and then click outside the input field."
          InputType="text"
          OnChange="@((string val) => LogEventInput(AppState!.T($"Value changed to: '{val}'")))" />
<p>Current Logged Value: "@loggedTextValue"</p>


private string? loggedTextValue = "Initial Logged Text";

3. Numeric Input (Integer)

Input field for integer values. Uses CultureInfo.InvariantCulture for consistent parsing.

Age

Enter your age as a whole number.

Current Value: 123

Implementation


<P11Input Label="Age"
          @bind-Value="intValue"
          Description="Enter your age as a whole number."
          InputType="number"
          Culture="@CultureInfo.InvariantCulture" />
<p>Current Value: @(intValue.HasValue ? intValue.ToString() : "null")</p>


private int? intValue = 123;

4. Numeric Input (Decimal / Double)

Input field for decimal values. Demonstrates culture-specific formatting (e.g., comma as decimal separator for German culture).

Price

Enter a price with decimal places (e.g., 12.34 or 12,34 depending on culture).

Current Value: 45,67

Implementation


<P11Input Label="Price"
          @bind-Value="decimalValue"
          Description="Enter a price with decimal places (e.g., 12.34 or 12,34 depending on culture)."
          InputType="text"
          Culture="@germanCulture" />
<p>Current Value: @(decimalValue.HasValue ? decimalValue.Value.ToString(germanCulture) : "null")</p>


private decimal? decimalValue = 45.67m;
private CultureInfo germanCulture = new CultureInfo("de-DE");

5. Email Input

Input field specifically for email addresses, leveraging the browser's native email validation where available.

E-Mail

Your email address.

Current Value: "test@example.com"

Implementation


<P11Input Label="E-Mail"
          @bind-Value="emailValue"
          Description="Your email address."
          InputType="email" />
<p>Current Value: "@emailValue"</p>


private string? emailValue = "test@example.com";

6. Password Input

Input field for sensitive information like passwords. Characters are masked.

Password

Minimum 8 characters.

Current Value (not displayed for security reasons): [*****]

Implementation


<P11Input Label="Password"
          @bind-Value="passwordValue"
          Description="Minimum 8 characters."
          InputType="password" />
<p>Current Value (for security reasons not displayed): [*****]</p>


private string? passwordValue = "secure123";

7. Input with Additional Attributes & Custom Class

Demonstrates passing arbitrary HTML attributes (like placeholder, maxlength, class) directly to the underlying <input> element, and applying a custom CSS class to the component's root div.

Focus me (with Placeholder)

Current Value: "Focus here"

Implementation


<P11Input Label="Focus me (with Placeholder)"
          @bind-Value="focusedValue"
          placeholder="Enter something here..."
          maxlength="20"
          CssClass="my-custom-input-group"
          class="bg-light border-success"
          OnFocus="@(() => LogEventInput("Input got focus!"))"
          OnBlur="@(() => LogEventInput("Input lost focus!"))" />
<p>Current Value: "@focusedValue"</p>


private string? focusedValue = "Focus here";

8. Input without Label (Accessibility Warning)

This example intentionally omits the Label parameter. In development mode, this should trigger an accessibility warning on the UI, highlighting the importance of labels for screen readers.

Expected behavior: In development mode, a warning about missing label should appear below the input.

This description has no associated label!

P11Input Configuration Error:

P11Input Accessibility Warning: A 'Description' is provided, but 'Label' is missing. For better accessibility, consider providing a 'Label' alongside a 'Description' for form controls.

This is only visible during development. Please correct the parameters or set ShowDevelopmentErrors = false to suppress this warning.

Current Value: "Value without Label"

Implementation


<P11Input @bind-Value="noLabelValue"
          Description="This description has no associated label!" />
<p>Current Value: "@noLabelValue"</p>


private string? noLabelValue = "Value without Label";

9. InputType 'number' with TValue 'string' (Configuration Warning)

This example intentionally uses InputType="number" with a string TValue. In development mode, this should trigger a configuration warning on the UI, as it's generally not recommended for proper numeric input handling.

Expected behavior: In development mode, a warning about mismatched InputType and TValue should appear below the input.

Text as Number (Warning)

A warning should appear here, as TValue is String, but InputType is 'number'.

P11Input Configuration Error:

P11Input Configuration Warning: InputType is 'number' but TValue is 'String'. This might lead to unexpected parsing behavior. Consider setting InputType to 'text' for non-numeric TValue types.

This is only visible during development. Please correct the parameters or set ShowDevelopmentErrors = false to suppress this warning.

Current Value: "123"

Implementation


<P11Input Label="Text as Number (Warning)"
          @bind-Value="stringAsNumberValue"
          InputType="number"
          Description="A warning should appear here, as TValue is String, but InputType is 'number" />
<p>Current Value: "@stringAsNumberValue"</p>


private string? stringAsNumberValue = "123";

10. Date Input (using DateTime)

Input field for date selection, using DateTime? as the bound value type.

Date of Birth

Select your date of birth. (Format: YYYY-MM-DD)

Current Value: 08.12.2025

Implementation


<P11Input Label="Date of Birth"
          @bind-Value="dateValue"
          InputType="date"
          Culture="@CultureInfo.InvariantCulture"
          Description="Select your date of birth. (Format: YYYY-MM-DD)" />
<p>Current Value: @(dateValue.HasValue ? dateValue.Value.ToShortDateString() : "null")</p>


private DateTime? dateValue = DateTime.Now;

Event Log

This log displays events triggered by the input components, such as focus, blur, and explicit value changes.

Implementation


<h4 class="mb-3">Event Log</h4>
<p>This log displays events triggered by the input components, such as focus, blur, and explicit value changes.</p>
<div class="border p-2" style="height: 150px; overflow-y: scroll; background-color: #f8f9fa;">
    @foreach (var logEntry in eventLogInput)
    {
        <div>@logEntry</div>
    }
</div>


private List<string> eventLogInput = new List<string>();

private void LogEventInput(string message)
{
    eventLogInput.Add($"{DateTime.Now:HH:mm:ss} - {message}");
    if (eventLogInput.Count > 10)
    {
        eventLogInput.RemoveAt(0);
    }
    StateHasChanged();
}

Component API

Parameter	Type	Default	Description
`Label`	`string?`	`null`	Gets or sets the label text for the input field.
`Description`	`string?`	`null`	Gets or sets a descriptive text that will appear below the input field, typically providing additional guidance or context.
`Value`	`TValue?`	`null`	The value of the input. This parameter is used for two-way binding with `@bind-Value`.
`InputType`	`string`	`text`	Specifies the HTML 'type' attribute for the input element (e.g., 'text', 'number', 'email', 'password'). Defaults to 'text'.
`Culture`	`CultureInfo?`	`null` (CurrentCulture)	Specifies the culture to use for parsing and formatting numeric values. If not set, `CurrentCulture` is used.
`AdditionalAttributes`	`Dictionary<string, object>?`	`null`	Gets or sets a collection of additional attributes that will be applied to the `input` element. This allows passing standard HTML attributes directly to the underlying `input` tag.
`CssClass`	`string?`	`null`	Gets or sets an optional CSS class string that will be applied to the root `div` element of the component.
`ShowDevelopmentErrors`	`bool`	`true`	If `true`, configuration error messages will be displayed on the UI in development mode. Set to `false` to suppress them globally or per instance.
Events
`ValueChanged`	`EventCallback<TValue>`	-	An `EventCallback` that is invoked when the `Value` changes. Used for two-way binding.
`OnFocus`	`EventCallback<FocusEventArgs>`	-	An `EventCallback` that is invoked when the input field gains focus.
`OnBlur`	`EventCallback<FocusEventArgs>`	-	An `EventCallback` that is invoked when the input field loses focus.
`OnChange`	`EventCallback<ChangeEventArgs>`	-	An `EventCallback` that is invoked when the input element's value is committed (e.g., on blur or Enter key).