TextField

<BitTextField Label="Basic" />
<BitTextField Label="Placeholder" Placeholder="Enter a text..." />
<BitTextField Label="Disabled" IsEnabled="false" />
<BitTextField Label="ReadOnly" ReadOnly DefaultValue="This is ReadOnly" />
<BitTextField Label="Description" Description="This is Description" />
<BitTextField Label="Required" Required />
<BitTextField Label="MaxLength: 5" MaxLength="5" />
<BitTextField Label="Auto focused" AutoFocus />

<BitTextField Label="Basic" Underlined />
<BitTextField Label="Placeholder" Underlined Placeholder="Enter a text..." />
<BitTextField Label="Disabled" Underlined IsEnabled="false" />
<BitTextField Label="Required" Underlined Required />

<BitTextField Label="Basic" Placeholder="Enter a text..." NoBorder />
<BitTextField Label="Disabled" Placeholder="Enter a text..." NoBorder IsEnabled="false" />
<BitTextField Label="Required" Placeholder="Enter a text..." NoBorder Required />

<BitTextField Label="Multiline" Multiline />
<BitTextField Label="Resizable" Multiline Resizable />
<BitTextField Label="Rows = 10" Multiline Rows="10" />
<BitTextField Label="AutoHeight" Multiline AutoHeight />
<BitTextField Label="PreventEnter (use Shift+Enter for new-line)" Multiline AutoHeight PreventEnter />

<BitTextField Label="Email" IconName="@BitIconName.EditMail" />
<BitTextField Label="Calendar" IconName="@BitIconName.Calendar" />

<BitTextField Label="Prefix" Prefix="https://" />
<BitTextField Label="Suffix" Suffix=".com" />
<BitTextField Label="Prefix and Suffix" Prefix="https://" Suffix=".com" />
<BitTextField Label="Disabled" Prefix="https://" Suffix=".com" IsEnabled="false" />

<BitTextField>
    <LabelTemplate>
        <BitLabel Style="color:coral">Custom Label</BitLabel>
    </LabelTemplate>
</BitTextField>

<BitTextField Label="Custom Description">
    <DescriptionTemplate>
        <BitLabel Style="color:coral">Description</BitLabel>
    </DescriptionTemplate>
</BitTextField>

<BitTextField Label="Custom Prefix">
    <PrefixTemplate>
        <BitLabel Style="color:coral;margin:0 5px">Prefix</BitLabel>
    </PrefixTemplate>
</BitTextField>

<BitTextField Label="Custom Suffix">
    <SuffixTemplate>
        <BitLabel Style="color:coral;margin:0 5px">Suffix</BitLabel>
    </SuffixTemplate>
</BitTextField>

<BitTextField Label="Password" Type="BitInputType.Password" />
<BitTextField Label="Reveal Password" Type="BitInputType.Password" CanRevealPassword />

<BitTextField Label="Email" DefaultValue="[email protected]" ShowClearButton />

<BitTextField Label="One-way" Value="@oneWayValue" />
<div>Value: [@oneWayValue]</div>
<BitOtpInput Length="5" Style="margin-top: 5px;" @bind-Value="oneWayValue" />

<BitTextField Label="Two-way" @bind-Value="twoWayValue" />
<div>Value: [@twoWayValue]</div>
<BitOtpInput Length="5" Style="margin-top: 5px;" @bind-Value="twoWayValue" Immediate />

<BitTextField Label="OnChange" OnChange="(v) => onChangeValue = v" Immediate />
<BitLabel>Value: [@onChangeValue]</BitLabel>

<BitTextField Label="Immediate" @bind-Value="@immediateValue" Immediate />
<div>Value: [@immediateValue]</div>

<BitTextField Label="Debounce" @bind-Value="@debounceValue" Immediate DebounceTime="300" />
<div>Value: [@debounceValue]</div>

<BitTextField Label="Throttle" @bind-Value="@throttleValue" Immediate ThrottleTime="300" />
<div>Value: [@throttleValue]</div>
@code {
    private string oneWayValue;
    private string twoWayValue;
    private string onChangeValue;
    private string? immediateValue;
    private string? debounceValue;
    private string? throttleValue;
}
                    

<BitTextField @bind-Value="ghostBasicTextValue"
              Immediate
              Label="Basic Single-line"
              GhostText="@ghostBasicSuggestion"
              Placeholder="Type 'app', 'ban', 'car', or 'dog'..."
              OnGhostTextAccepted="(_ => ghostBasicSuggestion = null)"
              OnChange="(v => ghostBasicSuggestion = GetGhostSuggestion(v))" />
<div>Value: [@ghostBasicTextValue]</div>

<BitTextField @bind-Value="ghostBasicMultilineValue"
              Multiline
              Resizable
              Rows="5"
              Immediate
              PermanentGhost
              Label="Basic Multiline"
              GhostText="@ghostBasicMultilineSuggestion"
              Placeholder="Type 'app', 'ban', 'car', or 'dog'..."
              OnGhostTextAccepted="(_ => ghostBasicMultilineSuggestion = null)"
              OnChange="(v => ghostBasicMultilineSuggestion = GetGhostSuggestion(v))" />
<div>Value: [@ghostBasicMultilineValue]</div>


<BitTextField @bind-Value="ghostTextValue"
              Immediate
              Label="Single-line"
              GhostText="@ghostSuggestion"
              Placeholder="Type 'app', 'ban', 'car', or 'dog'..."
              OnGhostTextAccepted="(_ => ClearGhostSuggestion(isMultiline: false))"
              OnChange="(v => SetGhostSuggestionAsync(v, isMultiline: false))" />
<div>Value: [@ghostTextValue]</div>

<BitTextField @bind-Value="ghostMultilineValue"
              Multiline
              Resizable
              Rows="5"
              Immediate
              PermanentGhost
              Label="Multiline"
              GhostText="@ghostMultilineSuggestion"
              Placeholder="Type 'app', 'ban', 'car', or 'dog'..."
              OnGhostTextAccepted="(_ => ClearGhostSuggestion(isMultiline: true))"
              OnChange="(v => SetGhostSuggestionAsync(v, isMultiline: true))" />
<div>Value: [@ghostMultilineValue]</div>
@code {
    private string? ghostBasicTextValue;
    private string? ghostBasicSuggestion;
    
    private string? ghostBasicMultilineValue;
    private string? ghostBasicMultilineSuggestion;
    
    private string? ghostTextValue;
    private string? ghostSuggestion;
    
    private string? ghostMultilineValue;
    private string? ghostMultilineSuggestion;
    
    private CancellationTokenSource? _ghostSuggestionCts;
    private CancellationTokenSource? _ghostMultilineSuggestionCts;
    
    private static readonly string[] _suggestions =
    [
        "application form",
        "banana smoothie",
        "car repair manual",
        "dog training guide"
    ];
    
    private static string? GetGhostSuggestion(string? value)
    {
        if (string.IsNullOrEmpty(value)) return null;
    
        if (char.IsWhiteSpace(value[^1])) return null;
    
        var lastWord = value.Split((char[]?)null, StringSplitOptions.RemoveEmptyEntries).LastOrDefault();
    
        if (string.IsNullOrEmpty(lastWord)) return null;
    
        var match = _suggestions.FirstOrDefault(s => s.StartsWith(lastWord, StringComparison.OrdinalIgnoreCase));
        return match?[lastWord.Length..];
    }
    
    private async Task SetGhostSuggestionAsync(string? value, bool isMultiline)
    {
        var cts = new CancellationTokenSource();
    
        if (isMultiline)
        {
            CancelAndDispose(ref _ghostMultilineSuggestionCts);
            _ghostMultilineSuggestionCts = cts;
            ghostMultilineSuggestion = null;
        }
        else
        {
            CancelAndDispose(ref _ghostSuggestionCts);
            _ghostSuggestionCts = cts;
            ghostSuggestion = null;
        }
    
        try
        {
            var suggestion = await GetGhostSuggestionAsync(value, cts.Token);
    
            if (cts.IsCancellationRequested) return;
    
            if (isMultiline)
            {
                ghostMultilineSuggestion = suggestion;
            }
            else
            {
                ghostSuggestion = suggestion;
            }
        }
        catch (OperationCanceledException)
        {
        }
    }
    
    private void ClearGhostSuggestion(bool isMultiline)
    {
        if (isMultiline)
        {
            CancelAndDispose(ref _ghostMultilineSuggestionCts);
            ghostMultilineSuggestion = null;
        }
        else
        {
            CancelAndDispose(ref _ghostSuggestionCts);
            ghostSuggestion = null;
        }
    }
    
    private static void CancelAndDispose(ref CancellationTokenSource? cts)
    {
        cts?.Cancel();
        cts?.Dispose();
        cts = null;
    }
    
    private static async Task<string?> GetGhostSuggestionAsync(string? value, CancellationToken cancellationToken)
    {
        await Task.Delay(300, cancellationToken);
    
        return GetGhostSuggestion(value);
    }
}
                    

<BitTextField Label="Trimmed" Trim @bind-Value="trimmedValue" />
<pre>[@trimmedValue]</pre>

<BitTextField Label="Not Trimmed" @bind-Value="notTrimmedValue" />
<pre>[@notTrimmedValue]</pre>
@code {
    private string trimmedValue;
    private string notTrimmedValue;
}
                    

<style>
    .validation-message {
        color: red;
    }
</style>


<EditForm Model="validationTextFieldModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit" novalidate>
    <DataAnnotationsValidator />

    <BitTextField Label="Required" Required @bind-Value="validationTextFieldModel.Text" />
    <ValidationMessage For="() => validationTextFieldModel.Text" />

    <BitTextField Label="Numeric" @bind-Value="validationTextFieldModel.NumericText" />
    <ValidationMessage For="() => validationTextFieldModel.NumericText" />

    <BitTextField Label="Only chars" @bind-Value="validationTextFieldModel.CharacterText" />
    <ValidationMessage For="() => validationTextFieldModel.CharacterText" />

    <BitTextField Label="Email" @bind-Value="validationTextFieldModel.EmailText" />
    <ValidationMessage For="() => validationTextFieldModel.EmailText" />

    <BitTextField Label="3 < Length < 5" @bind-Value="validationTextFieldModel.RangeText" />
    <ValidationMessage For="() => validationTextFieldModel.RangeText" />

    <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
</EditForm>
@code {
    public class ValidationTextFieldModel
    {
        [Required(ErrorMessage = "This field is required.")]
        public string Text { get; set; }
    
        [RegularExpression("0*[1-9][0-9]*", ErrorMessage = "Only numeric values are allowed.")]
        public string NumericText { get; set; }
    
        [RegularExpression("^[a-zA-Z0-9.]*$", ErrorMessage = "Only letters(a-z), numbers(0-9), and period(.) are allowed.")]
        public string CharacterText { get; set; }
    
        [EmailAddress(ErrorMessage = "Invalid e-mail address.")]
        public string EmailText { get; set; }
    
        [StringLength(5, MinimumLength = 3, ErrorMessage = "The text length must be between 3 and 5 chars.")]
        public string RangeText { get; set; }
    }
    
    private ValidationTextFieldModel validationTextFieldModel = new();
    
    private void HandleValidSubmit() { }
    private void HandleInvalidSubmit() { }
}
                    

<BitTextField Label="Primary" Background="BitColorKind.Primary" IconName="@BitIconName.Calendar" />
<BitTextField Label="Secondary" Background="BitColorKind.Secondary" IconName="@BitIconName.Calendar" />
<BitTextField Label="Tertiary" Background="BitColorKind.Tertiary" IconName="@BitIconName.Calendar" />
<BitTextField Label="Transparent" Background="BitColorKind.Transparent" IconName="@BitIconName.Calendar" />

<BitTextField Label="Primary" Border="BitColorKind.Primary" />
<BitTextField Label="Secondary" Border="BitColorKind.Secondary" />
<BitTextField Label="Tertiary" Border="BitColorKind.Tertiary" />
<BitTextField Label="Transparent" Border="BitColorKind.Transparent" />

<BitTextField Label="Primary" Accent="BitColor.Primary" IconName="@BitIconName.Calendar" />
<BitTextField Label="Secondary" Accent="BitColor.Secondary" IconName="@BitIconName.Calendar" />
<BitTextField Label="Tertiary" Accent="BitColor.Tertiary" IconName="@BitIconName.Calendar" />

<BitTextField Label="Info" Accent="BitColor.Info" IconName="@BitIconName.Calendar" />
<BitTextField Label="Success" Accent="BitColor.Success" IconName="@BitIconName.Calendar" />
<BitTextField Label="Warning" Accent="BitColor.Warning" IconName="@BitIconName.Calendar" />
<BitTextField Label="SevereWarning" Accent="BitColor.SevereWarning" IconName="@BitIconName.Calendar" />
<BitTextField Label="Error" Accent="BitColor.Error" IconName="@BitIconName.Calendar" />

<BitTextField Label="PrimaryBackground" Accent="BitColor.PrimaryBackground" IconName="@BitIconName.Calendar" />
<BitTextField Label="SecondaryBackground" Accent="BitColor.SecondaryBackground" IconName="@BitIconName.Calendar" />
<BitTextField Label="TertiaryBackground" Accent="BitColor.TertiaryBackground" IconName="@BitIconName.Calendar" />

<BitTextField Label="PrimaryForeground" Accent="BitColor.PrimaryForeground" IconName="@BitIconName.Calendar" />
<BitTextField Label="SecondaryForeground" Accent="BitColor.SecondaryForeground" IconName="@BitIconName.Calendar" />
<BitTextField Label="TertiaryForeground" Accent="BitColor.TertiaryForeground" IconName="@BitIconName.Calendar" />

<BitTextField Label="PrimaryBorder" Accent="BitColor.PrimaryBorder" IconName="@BitIconName.Calendar" />
<BitTextField Label="SecondaryBorder" Accent="BitColor.SecondaryBorder" IconName="@BitIconName.Calendar" />
<BitTextField Label="TertiaryBorder" Accent="BitColor.TertiaryBorder" IconName="@BitIconName.Calendar" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />

<BitTextField Label="House" Icon="@("fa-solid fa-house")" />

<BitTextField Label="Heart" Icon="@BitIconInfo.Css("fa-solid fa-heart")" />

<BitTextField Label="GitHub" Icon="@BitIconInfo.Fa("brands github")" />

<BitTextField Label="Rocket" Icon="@BitIconInfo.Fa("solid rocket")" />


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" />

<BitTextField Label="House" Icon="@("bi bi-house-fill")" />

<BitTextField Label="Heart" Icon="@BitIconInfo.Css("bi bi-heart-fill")" />

<BitTextField Label="GitHub" Icon="@BitIconInfo.Bi("github")" />

<BitTextField Label="Gear" Icon="@BitIconInfo.Bi("gear-fill")" />

<style>
    .custom-class {
        overflow: hidden;
        margin-inline: 1rem;
        border-radius: 1rem;
        border: 2px solid brown;
    }

    .custom-class *, .custom-class *::after {
        border: none;
    }

    .custom-class::after {
        content: '';
        width: 0;
        left: 50%;
        bottom: 0;
        height: 2px;
        position: absolute;
        background-color: red;
        transition: width 0.3s ease, left 0.3s ease;
    }

    .custom-class:focus::after {
        left: 0;
        width: 100%;
    }


    .custom-root {
        height: 3rem;
        display: flex;
        align-items: end;
        position: relative;
        margin-inline: 1rem;
    }

    .custom-label {
        top: 0;
        left: 0;
        z-index: 1;
        padding: 0;
        font-size: 1rem;
        color: darkgray;
        position: absolute;
        transform-origin: top left;
        transform: translate(0, 22px) scale(1);
        transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
    }

    .custom-label-top {
        transform: translate(0, 1.5px) scale(0.75);
    }

    .custom-input {
        padding: 0;
        font-size: 1rem;
        font-weight: 900;
    }

    .custom-field {
        border-radius: 0;
        position: relative;
        border-width: 0 0 1px 0;
    }

    .custom-field::after {
        content: '';
        width: 0;
        height: 2px;
        border: none;
        position: absolute;
        inset: 100% 0 0 50%;
        background-color: blueviolet;
        transition: width 0.3s ease, left 0.3s ease;
    }

    .custom-focus .custom-field::after {
        left: 0;
        width: 100%;
    }

    .custom-focus .custom-label {
        color: blueviolet;
        transform: translate(0, 1.5px) scale(0.75);
    }
</style>


<BitTextField Style="box-shadow: aqua 0 0 1rem; margin-inline: 1rem;" />

<BitTextField Class="custom-class" />


<BitTextField Label="Styles"
              Styles="@(new() { Root = "margin-inline: 1rem;",
                                Focused = "--focused-background: #b2b2b25a;",
                                FieldGroup = "background: var(--focused-background);",
                                Label = "text-shadow: aqua 0 0 1rem; font-weight: 900; font-size: 1.25rem;",
                                Input = "padding: 0.5rem;" })" />

<BitTextField @bind-Value="classesValue"
              Label="Classes"
              Classes="@(new() { Root = "custom-root",
                                 FieldGroup = "custom-field",
                                 Focused = "custom-focus",
                                 Input = "custom-input",
                                 Label = $"custom-label{(string.IsNullOrEmpty(classesValue) ? string.Empty : " custom-label-top")}" })" />
@code {
    private string? classesValue;
}
                    

<BitTextField Dir="BitDir.Rtl"
              Placeholder="پست الکترونیکی"
              IconName="@BitIconName.EditMail" />

<BitTextField Underlined 
              Label="تقویم" 
              Dir="BitDir.Rtl"
              IconName="@BitIconName.Calendar" />