@using System.ComponentModel.DataAnnotations @* Styleguide: the Data input components (Input, Select, Textarea, Checkbox, Toggle, Radio, Range, Rating, Filter, OTP, File input, Fieldset, Label, Validator, Calendar). Everything sits in one EditForm with DataAnnotations: submit it empty to see input-error and the validator hints. novalidate leaves the checking to Blazor. *@

DInput

@foreach (var color in Enum.GetValues()) { }

⌘K https:// .com

Immediate search: "@search", text: "@text"

Name is required

DSelect

@foreach (var color in Enum.GetValues()) { }

Type

Pick one

DTextarea

@foreach (var color in Enum.GetValues()) { }

Between 10 and 140 characters @(model.Bio?.Length ?? 0)/140

DCheckbox

@foreach (var color in Enum.GetValues()) { }

DToggle

@foreach (var color in Enum.GetValues()) { }

DRadioGroup / DRadio

@foreach (var color in Enum.GetValues()) { }

Picked: @radioColor

@foreach (var size in sizes) { } @foreach (var plan in plans) { }

DRange

@foreach (var color in Enum.GetValues()) { }

Value: @volume

|||||

DRating

@model.Stars stars (1 to 5)

@(halfStars / 2.0) stars (clearable)

DFilter

Picked: @(framework ?? "none"), @(filterColor?.ToString() ?? "none")

DOtp

@foreach (var color in Enum.GetValues().Skip(1)) { }

@foreach (var size in sizes) { }

DFileInput

@foreach (var color in Enum.GetValues()) { }

Picked: @(files.Count == 0 ? "nothing" : string.Join(", ", files))

DFieldset / DLabel

Page details Title Slug You can edit these later Disabled fieldset

DValidator / DValidatorHint

Native rules, checked by the browser once you've edited the field.

Enter a valid email address

Must be 3 to 30 letters, numbers or dashes (Compact: no space while valid)

DCalendar

Picked: @(model.Date?.ToString("yyyy-MM-dd") ?? "nothing") (from 30 days ago to 3 months ahead)

Today

Validate the form @submitResult

@code { class DemoModel { [Required] public string Name { get; set; } [Required] public string Language { get; set; } [Required, StringLength(140, MinimumLength = 10)] public string Bio { get; set; } [Range(typeof(bool), "true", "true", ErrorMessage = "Accept the terms")] public bool Terms { get; set; } public bool Notifications { get; set; } = true; [Required] public string Plan { get; set; } [Range(1, 5, ErrorMessage = "Rate from 1 to 5 stars")] public int Stars { get; set; } [Required, RegularExpression("[0-9]{6}", ErrorMessage = "Enter the 6 digits")] public string Code { get; set; } public DateOnly? Date { get; set; } } readonly DemoModel model = new(); readonly DSize[] sizes = { DSize.Xs, DSize.Sm, DSize.Md, DSize.Lg, DSize.Xl }; readonly string[] plans = { "Free", "Pro", "Team" }; readonly string[] frameworks = { "Blazor", "Svelte", "Vue", "React" }; readonly DateOnly today = DateOnly.FromDateTime(DateTime.Today); string submitResult; int disabledPick = 1; string text; string search; string site; string email; string username; string language = "C#"; string bio; bool check = true; bool toggle = true; DColor radioColor = DColor.Primary; DSize radioSize = DSize.Md; int volume = 40; int steps = 25; int stars = 3; int halfStars = 7; string framework; DColor? filterColor; string otp; List files = new(); void Submitted(bool valid) => submitResult = valid ? "Valid" : "Invalid: see the messages above"; void OnFiles(InputFileChangeEventArgs e) => files = e.GetMultipleFiles(e.FileCount).Select(f => f.Name).ToList(); }