Form fields


Text field

TODO: text...

Value:
Blazor
<BspTextField @bind-Value="_name" Label="Name" AutoFocus/>
<div>Value: @_name</div>
@code{
    private string? _name;
}

Validation - DataAnnotations

TODO: text...

Blazor
@using System.ComponentModel.DataAnnotations
<EditForm class="@Bs.Css.DisplayFlex.FlexColumn" Model="this">
    <DataAnnotationsValidator/>
    <BdkFocusFirstFieldOnInvalidSubmit/>
    <BspTextField @bind-Value="Name" Label="Name" />
    <BsButton Type="BsButtonType.Submit" Variant="BsButtonVariant.Primary">Send</BsButton>
</EditForm>
@code {
    [Required(ErrorMessage = "Name is required")]
    public string? Name { get; set; }

}

Validation - FluentValidation

TODO: text...

Blazor
@using System.ComponentModel.DataAnnotations
@using FluentValidation
<EditForm class="@Bs.Css.DisplayFlex.FlexColumn" Model="this">
    <BdkFluentValidator Validator="new Validator()"/>
    <BdkFocusFirstFieldOnInvalidSubmit/>
    <BspTextField @bind-Value="Name" Label="Name" />
    <BsButton Type="BsButtonType.Submit" Variant="BsButtonVariant.Primary">Send</BsButton>
</EditForm>
@code {
    public string? Name { get; set; }
    class Validator : AbstractValidator<TextFieldFluentValidationExample>
    {
        public Validator()
        {
            RuleFor(x => x.Name).NotEmpty();
        }
    }
}

Number field

TODO: text...

Value:
Blazor
<BspNumberField @bind-Value="_value" Immediate Label="Value" Step=".1M" Min="-1" Max="100" />
<div>Value: @_value</div>
@code{
    private decimal? _value;
}

TextArea field

TODO: text...

Description:
Blazor
<BspTextAreaField @bind-Value="_description" Label="Description" Rows="3" Immediate />
<div style="white-space: pre">Description: @_description</div>
@code{
    private string? _description;
}

Date field

TODO: text...

Birthdate:
Blazor
<BspDateField @bind-Value="_birthdate" Label="Birthdate" AutoFocus />
<div>Birthdate: @_birthdate</div>
@code{
    private DateTime? _birthdate;
}

Select field

TODO: text...

Option: null
Blazor
<BspSelectField Label="Options" @bind-Value="_option">
    <option value="">Select an option...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</BspSelectField>
<div>Option: @(_option is null ? "null" : _option.ToString())</div>
@code {
    private int? _option = null;
}

Check field

TODO: text...

Option: False
Blazor
@using System.ComponentModel.DataAnnotations
<EditForm Model="this">
    <DataAnnotationsValidator/>
    <BdkFocusFirstFieldOnInvalidSubmit/>
    <BspCheckField Label="Option" @bind-Value="Option"/>
    <div>Option: @Option</div>
    <button type="submit">Submit</button>
</EditForm>
@code {
    [AllowedValues(true)]
    public bool Option { get; set; }
}

Check field with custom label content

TODO: text...

Blazor
<BspCheckField @bind-Value="_like">
    I like <a href="https://getbootstrap.com/docs/5.3/forms/checks-radios/#checks" target="_blank">Bootstrap checks</a>
</BspCheckField>
@code {
    bool _like;
}