TextInput

The TextInput component is a simple spacer tool. It allows sibling HTML elements to have a consistent margin between them.

API Documentation

How it works #

The TextInput component provides a simple way to capture user input in a text field, supporting two-way data binding for seamless integration with your data model.

How to use:
  1. Add the TextInput component to your page.
  2. Bind its Value property to a variable using @bind-Value for automatic updates.
  3. Display or process the bound value as needed in your UI or logic.
This demo shows the basic setup for capturing and displaying user input using the TextInput component.
Entered text: 
<TextInput @bind-Value="@enteredText" />
<div class="mb-3">Entered text: @enteredText</div>

@code {
    private string? enteredText = null;
}

Bind event #

The TextInput component allows you to control when the bound value updates by specifying the BindEvent parameter.

How to use:
  1. Use @bind-Value to bind the input value to a variable.
  2. Set BindEvent="BindEvent.OnInput" to update the value on every keystroke, instead of the default onchange event.
  3. Use the bound variable in your UI or logic as needed.
This demo demonstrates how to update the bound value in real-time as the user types.
Entered text: 
<TextInput @bind-Value="@enteredText" BindEvent="BindEvent.OnInput" />
<div class="mb-3">Entered text: @enteredText</div>

@code {
    private string? enteredText = null;
}

Colors #

The TextInput component supports various color themes to match your application's style.

How to use:
  1. Add the TextInput component to your page.
  2. Set the Color property to one of the available options (e.g., Primary, Info, Success, Warning, Danger, Link).
  3. Bind the Value as needed.
This demo shows how to apply different color styles to the input field. 
<TextInput Class="mb-2" Color="TextInputColor.Link" Placeholder="Link input text" @bind-Value="@value1" />
<TextInput Class="mb-2" Color="TextInputColor.Primary" Placeholder="Primary input text" @bind-Value="@value2" />
<TextInput Class="mb-2" Color="TextInputColor.Info" Placeholder="Info input text" @bind-Value="@value3" />
<TextInput Class="mb-2" Color="TextInputColor.Success" Placeholder="Success input text" @bind-Value="@value4" />
<TextInput Class="mb-2" Color="TextInputColor.Warning" Placeholder="Warning input text" @bind-Value="@value5" />
<TextInput Class="mb-2" Color="TextInputColor.Danger" Placeholder="Danger input text" @bind-Value="@value6" />

@code {
    private string? value1 = null;
    private string? value2 = null;
    private string? value3 = null;
    private string? value4 = null;
    private string? value5 = null;
    private string? value6 = null;
}

Sizes #

The TextInput component can be rendered in multiple sizes to fit different UI requirements.

How to use:
  1. Add the TextInput component to your page.
  2. Set the Size property to Small, Normal, Medium, or Large as needed.
  3. Bind the Value property for user input.
This demo illustrates the available size options for the input field. 
<TextInput Class="mb-2" Size="TextInputSize.Small" Placeholder="Small input text" @bind-Value="@value1" />
<TextInput Class="mb-2" Size="TextInputSize.Normal" Placeholder="Normal input text" @bind-Value="@value2" />
<TextInput Class="mb-2" Size="TextInputSize.Medium" Placeholder="Medium input text" @bind-Value="@value3" />
<TextInput Class="mb-2" Size="TextInputSize.Large" Placeholder="Large input text" @bind-Value="@value4" />

@code {
    private string? value1 = null;
    private string? value2 = null;
    private string? value3 = null;
    private string? value4 = null;
}

Styles #

The TextInput component supports additional style options, such as rounded corners, to enhance the visual appearance.

How to use:
  1. Add the TextInput component to your page.
  2. Set IsRounded="true" to enable rounded corners.
  3. Bind the Value property as usual.
This demo shows how to apply a rounded style to the input field. 
<TextInput IsRounded="true" Placeholder="Rounded input text" @bind-Value="@value1" />

@code {
    private string? value1 = null;
}

States #

The TextInput component can visually represent different states, such as hovered, focused, or loading, to provide user feedback.

How to use:
  1. Add the TextInput component to your page.
  2. Set the State property to Hovered, Focused, or Loading to display the corresponding visual state.
  3. Bind the Value property as needed.
This demo demonstrates how to display different visual states for the input field. 
<TextInput Class="mb-2" Placeholder="Normal input text" @bind-Value="@value1" />
<TextInput Class="mb-2" State="TextInputState.Hovered" Placeholder="Hovered input text" @bind-Value="@value2" />
<TextInput Class="mb-2" State="TextInputState.Focused" Placeholder="Focused input text" @bind-Value="@value3" />
<TextInput Class="mb-2" State="TextInputState.Loading" Placeholder="Loading input text" @bind-Value="@value4" />

@code {
    private string? value1 = null;
    private string? value2 = null;
    private string? value3 = null;
    private string? value4 = null;
}

Disabled #

The TextInput component can be disabled to prevent user interaction, making it read-only.

How to use:
  1. Add the TextInput component to your page.
  2. Set Disabled="true" to disable the input field.
  3. Optionally, provide a placeholder or value to display in the disabled field.
This demo shows how to render a disabled input field. 
<TextInput Class="mb-2" Placeholder="Disabled input text" @bind-Value="@value1" Disabled="true" />

@code {
    private string? value1 = null;
}

Validations #

The TextInput component integrates with Blazor's form validation system, supporting data annotations and real-time feedback.

How to use:
  1. Wrap your TextInput components in an EditForm and provide a model with validation attributes.
  2. Bind each TextInput to a property on your model using @bind-Value.
  3. Use ValidationMessage to display validation errors for each field.
  4. Set BindEvent="BindEvent.OnInput" for real-time validation as the user types.
This demo demonstrates how to use TextInput with form validation and display error messages. 
@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Components.Forms

<style>
    /* validations */
    .valid.modified:not([type=checkbox]) {
        border-color: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l)) !important;
        outline: 1px solid hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l)) !important;
    }

    .invalid {
        border-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l)) !important;
        outline: 1px solid hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l)) !important;
    }

    .validation-message {
        color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l)) !important;
    }
</style>

<EditForm EditContext="@editContext" OnValidSubmit="HandleOnValidSubmit">
    <DataAnnotationsValidator />

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">First Name: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <TextInput @bind-Value="@customer.FirstName" BindEvent="BindEvent.OnInput" Placeholder="Enter first name" />
            <ValidationMessage For="@(() => customer.FirstName)" />
        </div>
    </div>

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Last Name: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <TextInput @bind-Value="@customer.LastName" BindEvent="BindEvent.OnInput" Placeholder="Enter last name" />
            <ValidationMessage For="@(() => customer.LastName)" />
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 text-right">
            <Button Type="ButtonType.Button" Color="ButtonColor.Light" Size="ButtonSize.Small" Class="float-end" @onclick="ResetForm">Reset</Button>
            <Button Type="ButtonType.Submit" Color="ButtonColor.Success" Size="ButtonSize.Small" Class="float-end me-2">Submit</Button>
        </div>
    </div>

</EditForm>

@code {
    private Customer customer = new();
    private EditContext editContext = default!;

    protected override void OnInitialized()
    {
        editContext = new EditContext(customer);
        base.OnInitialized();
    }

    public void HandleOnValidSubmit()
    {
        // additional check
        if (editContext.Validate())
        {
            // do something
            // submit the form
            Console.WriteLine("Form submitted successfully");
        }
    }

    private void ResetForm()
    {
        customer = new();
        editContext = new EditContext(customer);
    }

    public class Customer
    {
        [Required(ErrorMessage = "First name required.")]
        public string? FirstName { get; set; }

        [Required(ErrorMessage = "Last name required.")]
        public string? LastName { get; set; }
    }
}

Alignment #

The TextInput component allows you to control the text alignment within the input field.

How to use:
  1. Add the TextInput component to your page.
  2. Set the TextAlignment property to Left, Center, or Right to align the text as desired.
  3. Bind the Value property for user input.
This demo shows how to adjust the text alignment inside the input field. 
<TextInput Class="mb-2" @bind-Value="@enteredText1" />
<TextInput Class="mb-2" @bind-Value="@enteredText2" TextAlignment="TextAlignment.Left" />
<TextInput Class="mb-2" @bind-Value="@enteredText3" TextAlignment="TextAlignment.Center" />
<TextInput Class="mb-2" @bind-Value="@enteredText4" TextAlignment="TextAlignment.Right" />

@code {
    private string? enteredText1 = "Sample text";
    private string? enteredText2 = "Sample text";
    private string? enteredText3 = "Sample text";
    private string? enteredText4 = "Sample text";
}

Events: ValueChanged #

The TextInput component exposes a ValueChanged event, allowing you to execute custom logic whenever the input value changes.

How to use (onchange):
  1. Add the TextInput component and bind its Value property.
  2. Set the ValueChanged callback to handle value changes.
  3. By default, the event fires on onchange (when the input loses focus or the user presses Enter).
This demo shows how to handle value changes using the default event.
Entered name: 
<TextInput Value="@name"
           ValueExpression="() => name"
           ValueChanged="(value) => NameChanged(value)" />
<div class="mb-3">Entered name: @name</div>

@code {
    private string? name = null;

    private void NameChanged(string? value)
    {
        name = value;
        // do something
    }
}
How to use (oninput):
  1. Set the BindEvent property to BindEvent.OnInput to trigger ValueChanged on every keystroke.
  2. Bind the Value property and provide a ValueChanged callback as before.
  3. Use this approach for real-time processing or validation as the user types.
This demo demonstrates handling value changes on every input event.
Entered name: 
<TextInput Value="@name"
           ValueExpression="() => name"
           ValueChanged="(value) => NameChanged(value)"
           BindEvent="BindEvent.OnInput" />
<div class="mb-3">Entered name: @name</div>

@code {
    private string? name = null;

    private void NameChanged(string? value)
    {
        name = value;
        // do something
    }
}
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!