DurationField

@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="duration-field-limits" OnValidSubmit="Save" MaxWidth="24.Rem" Grow>
    <DurationField @bind-Value="Model!.Timeout" Hint="From a second to an hour." />
    <DurationField @bind-Value="Model!.Retention" LargestUnit="DurationUnit.Days" SmallestUnit="DurationUnit.Hours" Max="TimeSpan.FromDays(90)" Hint="Up to 90 days." />
    <Row><Button Submit>Save settings</Button></Row>
    @if (_saved is { } saved)
    {
        <Alert Status="Status.Success">Saved: time out after @saved.Timeout, keep for @(saved.Retention?.ToString() ?? "no time").</Alert>
    }
</Form>

@code {
    [SupplyParameterFromForm(FormName = "duration-field-limits")]
    private Settings? Model { get; set; }

    // What was saved, not the fields: on an interactive page they follow typing.
    private (TimeSpan Timeout, TimeSpan? Retention)? _saved;

    protected override void OnInitialized() => Model ??= new();

    private void Save() => _saved = (Model!.Timeout!.Value, Model.Retention);

    public sealed class Settings
    {
        [Required, Range(typeof(TimeSpan), "00:00:01", "01:00:00", ErrorMessage = "Pick from a second to an hour.")]
        public TimeSpan? Timeout { get; set; } = TimeSpan.FromSeconds(90);

        public TimeSpan? Retention { get; set; }
    }
}

<Form Model="Model" FormName="duration-field-states" MaxWidth="24.Rem" Grow>
    <DurationField @bind-Value="Model!.Slot" Label="Quarter hours" SmallestUnit="DurationUnit.Minutes" Step="TimeSpan.FromMinutes(15)" />
    <DurationField @bind-Value="Model!.Offset" Label="Clock offset" Min="TimeSpan.FromHours(-12)" Max="TimeSpan.FromHours(14)" SmallestUnit="DurationUnit.Minutes" />
    <DurationField @bind-Value="Model!.Small" Label="Small" Size="ControlSize.Sm" />
    <DurationField @bind-Value="Model!.Large" Label="Large" Size="ControlSize.Lg" />
    <DurationField @bind-Value="Model!.Signed" Label="Signed length" ReadOnly Hint="Read-only: posted, but can't be changed." />
    <DurationField @bind-Value="Model!.Renews" Label="Renews after" Disabled Hint="Disabled: not posted." />
    <DurationField @bind-Value="Model!.Timeout" Label="Timeout" Clearable />
</Form>

@code {
    [SupplyParameterFromForm(FormName = "duration-field-states")]
    private Contract? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    public sealed class Contract
    {
        public TimeSpan? Timeout { get; set; } = TimeSpan.FromMinutes(90);

        public TimeSpan Slot { get; set; } = TimeSpan.FromMinutes(45);
        public TimeSpan Offset { get; set; } = TimeSpan.FromHours(-5);
        public TimeSpan Small { get; set; } = new(1, 30, 0);
        public TimeSpan Large { get; set; } = new(1, 30, 0);
        public TimeSpan Signed { get; set; } = new(26, 0, 0);
        public TimeSpan Renews { get; set; } = new(0, 45, 10);
    }
}