Forms — Blazify

Text inputs

Set the value type with TValue and wire it up with bind-Value.

Name

Last name

name= | family=

razor

@using BzCore.Components.Input

<BzInput TValue="string" @bind-Value="_name" Label="نام"
         Clearable Placeholder="نام خود را بنویسید" />

<BzInput TValue="string" @bind-Value="_family" Label="نام خانوادگی" Clearable />

<p>name=@_name | family=@_family</p>

@code {
    private string _name = "";
    private string _family = "";
}

@*
Handy extras:
    UpdateTrigger="BzUpdateTrigger.OnInput"   update on every keystroke
    CharFilter="BzCharFilter.NumberOnly"      digits only
    Mode="BzInputMode.Mask" Mask="###-###"   masked input
    MaxLength / StartIcon / EndIcon / Disabled
*@

Select

Provide options as BzOption: value, label and an optional icon.

City

city=

razor

@using BzCore.Components.Form

<BzSelect TValue="string" @bind-Value="_city" Label="شهر"
          Items="_cities" Clearable Placeholder="یک شهر" />

<p>city=@_city</p>

@code {
    private string _city = "";

    // BzOption<T>(value, label, icon?)
    private List<BzOption<string>> _cities = new()
    {
        new("tehran", "تهران"),
        new("mashhad", "مشهد"),
        new("isfahan", "اصفهان"),
    };
}

Checkbox & switch

Both bind to a bool. Shape changes the checkbox outline.

I agree Newsletter Dark mode

agree=False | news=True | dark=False

razor

@using BzCore.Components.Form
@using BzCore.Enums

<BzCheckbox @bind-Value="_agree" Label="موافقم" Color="BzColor.Success" />

<BzCheckbox @bind-Value="_news" Label="خبرنامه"
            Shape="BzCheckShape.Rounded" Color="BzColor.Info" />

<BzSwitch @bind-Value="_dark" Label="حالت تیره" Color="BzColor.Primary" />

<p>agree=@_agree | news=@_news | dark=@_dark</p>

@code {
    private bool _agree;
    private bool _news = true;
    private bool _dark;
}

Radio group

Card turns each option into a clickable card.

Free Pro Team

plan=pro

razor

@using BzCore.Components.Form
@using BzCore.Enums

<BzRadioGroup TValue="string" @bind-Value="_plan"
              Orientation="BzOrientation.Horizontal"
              Color="BzColor.Success"
              Card
              Items="_plans" />

<p>plan=@_plan</p>

@code {
    private string _plan = "pro";

    private List<BzOption<string>> _plans = new()
    {
        new("free", "Free"),
        new("pro",  "Pro"),
        new("team", "Team"),
    };
}

Form controls