Forms

@code { string _name = ""; }
<MokaTextField @bind-Value="_name" Label="Full name" Placeholder="Enter your name"
               HelperText="As it appears on your ID" Required />

@code { string _pwd = ""; }
<MokaPasswordField @bind-Value="_pwd" Label="Password" HelperText="Minimum 8 characters" />

@code { int _qty = 1; }
<MokaNumericField TValue="int" @bind-Value="_qty" Label="Quantity" Min="1" Max="100" Step="1" />

@code { string _bio = ""; }
<MokaTextArea @bind-Value="_bio" Label="Bio" Rows="4" AutoResize Placeholder="Tell us about yourself…" />

@code { bool _agree; }
<MokaCheckbox @bind-Value="_agree" Label="I agree to the terms" />

@code { bool _notify = true; }
<MokaSwitch @bind-Value="_notify" Label="Email notifications" />

@code { double _vol = 50; }
<MokaSlider @bind-Value="_vol" Label="Volume" Min="0" Max="100" Step="5" ShowTicks />

@code { int _stars = 3; }
<MokaRating @bind-Value="_stars" Max="5" />

@code { DateTime? _date = DateTime.Today; }
<MokaDatePicker @bind-Value="_date" Label="Appointment date" />

@code { TimeSpan? _time = DateTime.Now.TimeOfDay; }
<MokaTimePicker @bind-Value="_time" Label="Meeting time" />

@code { string _color = "#d32f2f"; }
<MokaColorPicker @bind-Value="_color" Label="Brand color" />

@code {
    IBrowserFile? _file;
    void OnFilesChange(IReadOnlyList<IBrowserFile> files) => _file = files.FirstOrDefault();
}
<MokaFileUpload Label="Upload document" OnFilesSelected="OnFilesChange" Accept=".pdf,.docx" />
@if (_file is not null)
{
    <MokaCaption>@_file.Name (@(_file.Size / 1024) KB)</MokaCaption>
}

@code { IList<string> _tags = new List<string> { "blazor", "dotnet" }; }
<MokaTagInput @bind-Values="_tags" Label="Tags" Placeholder="Add tag and press Enter" />

@code { string _plan = "pro"; }
<MokaRadioGroup @bind-Value="_plan" Label="Plan">
    <MokaRadioItem Value="@("free")">Free</MokaRadioItem>
    <MokaRadioItem Value="@("pro")">Pro</MokaRadioItem>
    <MokaRadioItem Value="@("enterprise")">Enterprise</MokaRadioItem>
</MokaRadioGroup>

@code {
    string? _country;
    string[] _all = ["Germany", "France", "Italy", "Spain", "Poland"];
    Task<IEnumerable<string>> Search(string q)
        => Task.FromResult(_all.Where(c => c.Contains(q, StringComparison.OrdinalIgnoreCase)));
}
<MokaAutoComplete @bind-Value="_country" Label="Country" SearchFunc="Search" />

@code { string _otp = ""; }
<MokaOtpInput @bind-Value="_otp" Length="6" Label="Verification code" />

@code { string _phone = ""; }
<MokaPhoneInput @bind-Value="_phone" Label="Phone number" CountryCode="+1" />

@code { decimal? _amount; }
<MokaCurrencyInput @bind-Value="_amount" Label="Invoice amount" CurrencyCode="USD" />

@code { string? _sig; }
<MokaSignaturePad @bind-Value="_sig" Label="Signature" Height="120px" />
@if (_sig is not null)
{
    <img src="@_sig" style="border:1px solid #ccc;max-width:300px" />
}

<MokaTextField Label="Email" Value="not-an-email"
ErrorText="Please enter a valid email address." />

<div style="display:flex;flex-direction:column;gap:8px">
    <MokaTextField Label="Read-only field" Value="Cannot edit this" Disabled />
    <MokaSwitch Label="Disabled toggle" Value="true" Disabled />
</div>