LgTimeBox

LgTimeBox<TValue> allows you to input a time, via the keyboard (input mask) or through an interactive clock (clock picker). The bound value is a DateTime (only the time portion is modified) or a TimeSpan — or their nullable versions.

<LgTimeBox Label="#StartTime" @bind-Value="_model.StartTime" />

• Namespace: Lagoon.UI.Components
• Inherits from: LgInputBase<TValue> → LgAriaComponentBase → LgComponentBase
• NuGet Package: Lagoon.UI

Usage

Demo

Try this component in the Lagoon showcase.

Simple input

By default, the interactive clock is displayed on focus and seconds are ignored (format HH:mm). The default Placeholder is then "HH:MM".

ShiftPage.razor

<LgTimeBox Label="#StartTime" @bind-Value="_model.StartTime" />

ShiftPage.razor.cs

public partial class ShiftPage : LgPage
{
    // Model being edited: TimeSpan? for a duration/time of day without date part.
    private readonly ShiftVm _model = new();

    private sealed class ShiftVm
    {
        public TimeSpan? StartTime { get; set; }
    }
}

Seconds input

IgnoreSeconds="false" changes the format to HH:mm:ss. In this mode (as when ShowClockPicker="false"), the interactive clock is replaced by a keyboard input mask.

ChronoPage.razor

<LgTimeBox Label="#PreciseTime"
           IgnoreSeconds="false"
           @bind-Value="_model.PreciseTime" />

@* Mask input only, no clock. *@
<LgTimeBox Label="#AlarmTime"
           ShowClockPicker="false"
           @bind-Value="_model.AlarmTime" />

ChronoPage.razor.cs

public partial class ChronoPage : LgPage
{
    private readonly ChronoVm _model = new();

    private sealed class ChronoVm
    {
        public TimeSpan? PreciseTime { get; set; }
        public TimeSpan? AlarmTime { get; set; }
    }
}

Time of a DateTime

When bound to a DateTime, the component only modifies the time portion: the date part of the existing value is preserved (today's date is used if the value is empty).

AppointmentPage.razor

<LgDateBox Label="#AppointmentDate" @bind-Value="_model.Appointment" />
<LgTimeBox Label="#AppointmentTime"
           OnChangingAsync="OnTimeChangingAsync"
           @bind-Value="_model.Appointment" />

AppointmentPage.razor.cs

public partial class AppointmentPage : LgPage
{
    private readonly AppointmentVm _model = new();

    // Called before the change: refuses appointments outside business hours.
    private Task OnTimeChangingAsync(ChangingEventArgs<DateTime?> args)
    {
        if (args.NewValue is DateTime value && (value.Hour < 8 || value.Hour >= 18))
        {
            args.Cancel = true;
            ShowWarning("#OutsideOpeningHours");
        }
        return Task.CompletedTask;
    }

    private sealed class AppointmentVm
    {
        public DateTime? Appointment { get; set; }
    }
}

Properties

All [Parameter] properties of the component, including inherited ones.

Name	Type	Default	Declared in	Description
IgnoreSeconds	bool	true	LgTimeBox	Ignores seconds (format HH:mm). When false, the format becomes HH:mm:ss and the interactive clock is replaced by the input mask.
OnChangingAsync	Func<ChangingEventArgs<TValue>, Task>	null	LgTimeBox	Callback invoked before the value changes; the change can be cancelled.
OnFocus	EventCallback<FocusEventArgs>	—	LgTimeBox	Callback invoked when the field receives focus.
Placeholder	string	null	LgTimeBox	Hint text displayed when the field is empty ("HH:MM" by default when the clock is active and seconds are ignored).
ShowClockPicker	bool	true	LgTimeBox	Shows the interactive clock on focus (only when IgnoreSeconds is true; otherwise the input mask is used).
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgInputBase	Additional HTML attributes applied to the rendered element.
AutoFocus	bool	false	LgInputBase	Gives focus to the field on first render.
ConfirmationMessage	string	null	LgInputBase	Confirmation message displayed before applying a value change.
Container	IInputContainer<TValue>	null	LgInputBase	Internal use: attaches a GridView cell to the field.
CssClass	string	null	LgInputBase	Additional CSS classes.
Disabled	bool	false	LgInputBase	Disables the field.
DisplayName	string	null	LgInputBase	Field name used in validation error messages.
HideValidationMessage	bool	false	LgInputBase	Hides the validation message below the field.
Label	string	null	LgInputBase	Field label.
LabelContent	RenderFragment	null	LgInputBase	Custom content for the label area.
OnChange	EventCallback<ChangeEventArgs>	—	LgInputBase	Callback invoked after the value changes.
OnReset	EventCallback<ChangeEventArgs>	—	LgInputBase	Callback invoked when the field is reset by the clear button.
PolicyEdit	string	null	LgInputBase	Policy required to modify the field.
PolicyVisible	string	null	LgInputBase	Policy required to display the field.
ReadOnly	bool	false	LgInputBase	Displays the field as read-only.
Required	bool?	null	LgInputBase	Required field. If null, inferred from the [Required] attribute of the bound property.
ResetButton	bool?	null	LgInputBase	Shows the clear button. If null, the application's behavior configuration applies.
ResetText	string	null	LgInputBase	Text of the clear button.
ResetTextAriaLabel	string	null	LgInputBase	Accessible label (aria-label) of the clear button.
Tooltip	string	null	LgInputBase	Tooltip.
TooltipIsHtml	bool	false	LgInputBase	Indicates whether the Tooltip content is in HTML format (otherwise plain text).
Value	TValue	—	LgInputBase	Bound value (@bind-Value), of type DateTime(?) or TimeSpan(?).
ValueChanged	EventCallback<TValue>	—	LgInputBase	Callback for updating the bound value.
ValueExpression	Expression<Func<TValue>>	—	LgInputBase	Expression identifying the bound property.
AriaLabel	string	null	LgAriaComponentBase	Value of the aria-label attribute.
AriaLabelledBy	string	null	LgAriaComponentBase	Value of the aria-labelledby attribute.

Cascading parameters

LgTimeBox also consumes parameters automatically provided by ancestor components (you do not need to define them): ParentAuthorizeView (LgAuthorizeView) and the edit context of a parent LgEditForm.

Events

Event	Type	Description
OnChangingAsync	Func<ChangingEventArgs<TValue>, Task>	Before the value changes; args.Cancel = true cancels the change.
OnChange	EventCallback<ChangeEventArgs>	After the value changes.
OnFocus	EventCallback<FocusEventArgs>	When the field receives focus.
OnReset	EventCallback<ChangeEventArgs>	When the field is reset by the clear button.

Best practices / accessibility

• Use TimeSpan? for a "pure" time (without date); reserve DateTime for cases where the same model carries both date and time (often paired with a LgDateBox bound to the same property).
• The interactive clock does not handle seconds: IgnoreSeconds="false" automatically switches to the input mask.

Complete reference

All parameters (including inherited ones): API Reference — LgTimeBox.

Related components

• LgDateBox — day selection.
• LgGridTimeColumn — time column in an LgGridView.