BlazorUI Demo

Numeric, boolean and range fields

Typed primitive inputs that participate in standard EditForm validation.

Numbers and range
40
Score: 40
View code
<EditForm Model="numericModel" FormName="numeric-fields">
    <BuiNumericField TValue="decimal?" @bind-Value="numericModel.Amount" Label="Amount" Min="0" Step="0.5m" />
    <BuiRange TValue="int" @bind-Value="numericModel.Score" Label="Score" Min="0" Max="100" />
    <BuiText Typo="Typo.Caption">Score: @numericModel.Score</BuiText>
</EditForm>

@code {
    private NumericModel numericModel = new();
    private sealed class NumericModel { public decimal? Amount { get; set; } public int Score { get; set; } = 40; }
}
Checkbox, switch and nullable state
View code
<EditForm Model="booleanModel" FormName="boolean-fields">
    <BuiStack Gap="2"><BuiBooleanField TValue="bool" @bind-Value="booleanModel.Enabled" Label="Enabled" />
    <BuiBooleanField TValue="bool" @bind-Value="booleanModel.Notifications" Label="Notifications" Variant="BooleanVariant.Switch" />
    <BuiBooleanField TValue="bool?" @bind-Value="booleanModel.Approved" Label="Approval (tri-state)" /></BuiStack>
</EditForm>

@code {
    private BooleanModel booleanModel = new();
    private sealed class BooleanModel { public bool Enabled { get; set; } public bool Notifications { get; set; } public bool? Approved { get; set; } }
}