TextInput

<TextInput @bind-Value="@enteredText" />
<div class="mb-3">Entered text: @enteredText</div>

@code {
    private string? enteredText = null;
}

<TextInput @bind-Value="@enteredText" BindEvent="BindEvent.OnInput" />
<div class="mb-3">Entered text: @enteredText</div>

@code {
    private string? enteredText = null;
}

<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;
}

<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;
    private string? value5 = null;
    private string? value6 = null;
}

<TextInput IsRounded="true" Placeholder="Rounded input text" @bind-Value="@value1" />

@code {
    private string? value1 = null;
}

<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;
}

<TextInput Class="mb-2" Placeholder="Disabled input text" @bind-Value="@value1" Disabled="true" />

@code {
    private string? value1 = null;
}

@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; }
    }
}

<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";
}

<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
    }
}

<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
    }
}