<BitOtpInput />
<BitOtpInput IsEnabled="false" />
<BitOtpInput Length="4" />
<BitOtpInput AutoShift />
<BitOtpInput AutoFocus />

<BitOtpInput Label="OTP" />

<BitOtpInput>
    <LabelTemplate>
        <BitStack Horizontal>
            <BitText Gutter><i>Custom label</i></BitText>
            <BitSpacer />
            <BitIcon IconName="@BitIconName.TemporaryAccessPass" />
        </BitStack>
    </LabelTemplate>
</BitOtpInput>

<BitOtpInput Label="Text" Type="BitInputType.Text" />
<BitOtpInput Label="Number" Type="BitInputType.Number" />
<BitOtpInput Label="Password" Type="BitInputType.Password" />

<BitOtpInput Label="Default" />
<BitOtpInput Label="Reversed" Reversed />
<BitOtpInput Label="Vertical" Vertical />
<BitOtpInput Label="Reversed Vertical" Vertical Reversed />

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

<BitOtpInput Label="Two-way" @bind-Value="twoWayValue" />
<BitTextField Style="margin-top: 5px;" @bind-Value="twoWayValue" />
@code {
    private string? oneWayValue;
    private string? twoWayValue;
}
                    

<BitOtpInput Label="OnChange" OnChange="v => onChangeValue = v" />
<div>OnChange value: @onChangeValue</div>

<BitOtpInput Label="OnFill" OnFill="v => onFillValue = v" />
<div>OnFill value: @onFillValue</div>

<BitOtpInput Label="OnFocusIn" OnFocusIn="args => onFocusInArgs = args" />
<div>Focus type: @onFocusInArgs?.Event.Type</div>
<div>Input index: @onFocusInArgs?.Index</div>

<BitOtpInput Label="OnFocusOut" OnFocusOut="args => onFocusOutArgs = args" />
<div>Focus type: @onFocusOutArgs?.Event.Type</div>
<div>Input index: @onFocusOutArgs?.Index</div>

<BitOtpInput Label="OnInput" OnInput="args => onInputArgs = args" />
<div>Value: @onInputArgs?.Event.Value</div>
<div>Input index: @onInputArgs?.Index</div>

<BitOtpInput Label="OnKeyDown" OnKeyDown="args => onKeyDownArgs = args" />
<div>Key & Code: [@onKeyDownArgs?.Event.Key] [@onKeyDownArgs?.Event.Code]</div>
<div>Input index: @onKeyDownArgs?.Index</div>

<BitOtpInput Label="OnPaste" OnPaste="args => onPasteArgs = args" />
<div>Focus type: @onPasteArgs?.Event.Type</div>
<div>Input index: @onPasteArgs?.Index</div>
@code {
    private string? onChangeValue;
    private string? onFillValue;
    private (FocusEventArgs Event, int Index)? onFocusInArgs;
    private (FocusEventArgs Event, int Index)? onFocusOutArgs;
    private (ChangeEventArgs Event, int Index)? onInputArgs;
    private (KeyboardEventArgs Event, int Index)? onKeyDownArgs;
    private (ClipboardEventArgs Event, int Index)? onPasteArgs;
}
                    

<style>
    .validation-message {
        color: red;
        font-size: 0.75rem;
    }
</style>

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

    <BitOtpInput Length="6" @bind-Value="validationOtpInputModel.OtpValue" />
    <ValidationMessage For="() => validationOtpInputModel.OtpValue" />

    <BitButton Style="margin-top: 10px;" ButtonType="BitButtonType.Submit">Submit</BitButton>
</EditForm>
@code {
    public class ValidationOtpInputModel
    {
        [Required(ErrorMessage = "The OTP value is required.")]
        [MinLength(6, ErrorMessage = "Minimum length is 6.")]
        public string OtpValue { get; set; }
    }
    
    private ValidationOtpInputModel validationOtpInputModel = new();
    
    private void HandleValidSubmit() { }
    private void HandleInvalidSubmit() { }
}
                    

<BitOtpInput Label="Small" Size="BitSize.Small" />
<BitOtpInput Label="Medium" Size="BitSize.Medium" />
<BitOtpInput Label="Large" Size="BitSize.Large" />

<style>
    .custom-class {
        gap: 1rem;
        margin-inline: 1rem;
    }

    .custom-class input {
        border-radius: 0;
        border-width: 0 0 1px 0;
        border-color: lightseagreen;
    }


    .custom-root {
        margin-inline: 1rem;
    }

    .custom-input {
        border-radius: 50%;
        border: 1px solid tomato;
    }

    .custom-focused {
        border-color: red;
        box-shadow: tomato 0 0 1rem;
    }
</style>


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

<BitOtpInput Class="custom-class" />


<BitOtpInput Styles="@(new() { Root = "margin-inline: 1rem;",
                               Input = "border-color: blueviolet;",
                               Focused = "box-shadow: blueviolet 0 0 1rem;" })" />

<BitOtpInput Classes="@(new() { Root = "custom-root",
                                Input = "custom-input",
                                Focused = "custom-focused" })" />

<BitOtpInput Label="Default" Dir="BitDir.Rtl" />
<BitOtpInput Label="Reversed" Reversed Dir="BitDir.Rtl" />