Components

Datebox

Datebox allows users to enter and edit date values.
Source Styles source

Types

The datebox component is almost identical to the textbox but includes additional features specific to date input.

It supports various date types, including DateTime, DateTimeOffset, DateOnly, TimeOnly. Additionally, their nullable counterparts are also supported.

Usage 

<LumexDatebox TValue="DateTime?"
              Label="Birth date"
              Class="max-w-xs" />

Disabled 

<LumexDatebox TValue="DateTime?"
              Disabled="true"
              Label="Birth date"
              Class="max-w-xs" />

Read-Only 

<LumexDatebox TValue="DateTime?"
              ReadOnly="@true"
              Label="Bbirth date"
              Class="max-w-xs" />

Required 

<LumexDatebox TValue="DateTime?"
              Required="@true"
              Label="Birth date"
              Class="max-w-xs" />

Sizes

Small
Medium
Large
<div class="w-full grid grid-cols-1 gap-4">
    @foreach (Size size in _sizes)
    {
        <div>
            <LumexDatebox TValue="DateTime?"
                          Size="@size"
                          Label="Birth date"
                          Class="max-w-xs" />

            <small class="text-default-400 mt-1">@size</small>
        </div>
    }
</div>

@code {
    private Size[] _sizes = [
        Size.Small,
        Size.Medium,
        Size.Large
    ];
}

Radius

None
Small
Medium
Large
<div class="w-full grid grid-cols-1 gap-4 md:grid-cols-2">
    @foreach (Radius radius in _radii)
    {
        <div>
            <LumexDatebox TValue="DateTime?"
                          Radius="@radius"
                          Label="Birth date"
                          Class="max-w-xs" />

            <small class="text-default-400 mt-1">
                @radius
            </small>
        </div>
    }
</div>

@code {
    private Radius[] _radii = [
        Radius.None, 
        Radius.Small, 
        Radius.Medium, 
        Radius.Large
    ];
}

Colors

Default
Primary
Secondary
Success
Warning
Danger
Info
<div class="w-full grid grid-cols-1 gap-4 md:grid-cols-2">
    @foreach (ThemeColor color in _colors)
    {
        <div>
            <LumexDatebox TValue="DateTime?"
                          Color="@color"
                          Label="Birth date"
                          Class="max-w-xs" />

            <small class="text-default-400 mt-1">
                @color
            </small>
        </div>
    }
</div>

@code {
    private ThemeColor[] _colors = [
        ThemeColor.Default,
        ThemeColor.Primary,
        ThemeColor.Secondary,
        ThemeColor.Success,
        ThemeColor.Warning,
        ThemeColor.Danger,
        ThemeColor.Info
    ];
}

Variants

Flat
Outlined
Underlined
<div class="w-full grid grid-cols-1 gap-4">
    @foreach (InputVariant variant in _variants)
    {
        <div>
            <LumexDatebox TValue="DateTime?"
                          Variant="@variant"
                          Label="Birth date"
                          Class="max-w-xs" />

            <small class="text-default-400 mt-1">
                @variant
            </small>
        </div>
    }
</div>

@code {
    private InputVariant[] _variants = [
        InputVariant.Flat,
        InputVariant.Outlined,
        InputVariant.Underlined
    ];
}

Label Placements

Inside
Outside
<div class="w-full grid grid-cols-1 gap-4">
    @foreach (LabelPlacement placement in _labelPlacements)
    {
        <div>
            <LumexDatebox TValue="DateTime?"
                          LabelPlacement="@placement"
                          Label="Birth date"
                          Class="max-w-xs" />

            <small class="text-default-400 mt-1">
                @placement
            </small>
        </div>
    }
</div>

@code {
    private LabelPlacement[] _labelPlacements = [
        LabelPlacement.Inside,
        LabelPlacement.Outside
    ];
}

Clear Button 

<LumexDatebox Clearable="@true"
              Label="Birth date"
              Variant="@InputVariant.Outlined"
              Value="@DateTime.Today"
              Class="max-w-xs" />

Start & End Content

Start
End 
<div class="w-full grid grid-cols-1 gap-4">
    <div>
        <LumexDatebox TValue="DateTime?"
                      Label="Birth date"
                      StartContent="@_calendarClockIcon"
                      Class="max-w-xs" />

        <small class="text-default-500 mt-1">
            Start
        </small>
    </div>

    <div>
        <LumexDatebox TValue="DateTime?"
                      Label="Birth date"
                      EndContent="@_calendarClockIcon"
                      Class="max-w-xs" />

        <small class="text-default-500 mt-1">
            End
        </small>
    </div>
</div>

@code {
    private RenderFragment _calendarClockIcon = 
        @<CalendarClockIcon Size="20" class="text-default-400 shrink-0" />;
}

Description

We'll never share your birthday with anyone else.
<LumexDatebox TValue="DateTime?"
              Label="Birth date"
              Description="We'll never share your birthday with anyone else."
              Class="max-w-xs" />

Error Message

Display an error message below the datebox to indicate validation issues. You can combine the Invalid and ErrorMessage parameters to show an invalid input. An error message is shown only when the Invalid parameter is set to true. 

@using FluentValidation
@using FluentValidation.Results

<LumexDatebox TValue="DateTime?"
              Variant="@InputVariant.Underlined"
              Label="Birth date"
              Required="@true"
              ErrorMessage="@_userValidator.DateErrorMessage"
              Invalid="@(!string.IsNullOrEmpty(_userValidator.DateErrorMessage))"
              Color="@(!string.IsNullOrEmpty(_userValidator.DateErrorMessage) ? ThemeColor.Danger : ThemeColor.Success)"
              Value="@_user.Date"
              ValueChanged="@OnDateChange"
              Class="max-w-xs" />

@code {
    private User _user = new();
    private UserValidator _userValidator = new();

    protected override void OnInitialized()
    {
        _user.Date = DateTime.Today;
        Validate();
    }

    private void OnDateChange(DateTime? value)
    {
        _user.Date = value;
        Validate();
    }

    private void Validate()
    {
        ValidationResult result = _userValidator.Validate(_user);

        if (!result.IsValid)
        {
            _userValidator.DateErrorMessage = result.Errors
                .Where(failure => failure.PropertyName == nameof(User.Date))
                .Select(failure => failure.ErrorMessage)
                .FirstOrDefault();
        }
        else
        {
            _userValidator.DateErrorMessage = null;
        }
    }

    public class User
    {
        public DateTime? Date { get; set; }
    }

    public class UserValidator : AbstractValidator<User>
    {
        public string? DateErrorMessage { get; set; }

        public UserValidator()
        {
            RuleFor(user => user.Date)
                .NotEmpty()
                .WithMessage("Birth date is required");
        }
    }
}

Two-way Data Binding

Use @bind-Value directive or Value and ValueChanged parameters to manually control datebox value.

Value:

Value: 02/04/2026 00:00:00

<div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
    <div class="w-full flex flex-col gap-2">
        <LumexDatebox Label="Value"
                      @bind-Value="@_valueOne" />

        <p class="text-sm text-default-500">
            Value: @_valueOne
        </p>
    </div>

    <div class="w-full flex flex-col gap-2">
        <LumexDatebox TValue="DateTime?"
                      Label="Value"
                      Value="@_valueTwo"
                      ValueChanged="@OnValueChanged" />

        <p class="text-sm text-default-500">
            Value: @_valueTwo
        </p>
    </div>
</div>

@code {
    private DateTime? _valueOne;
    private DateTime? _valueTwo = DateTime.Today;

    private void OnValueChanged( DateTime? value )
    {
        _valueTwo = value;
    }
}

Custom styles

This component supports named slots, which allow custom styles to be applied to specific parts of the component:

  • Base: The overall wrapper.
  • Label: The label element.
  • MainWrapper: The wrapper of the input wrapper (when the label is outside).
  • InputWrapper: The wrapper of the label and the inner wrapper (when the label is inside).
  • InnerWrapper: The wrapper of the input, start/end content.
  • Input: The input element.
  • ClearButton: The clear button element.
  • HelperWrapper: The wrapper of a description and an error message.
  • Description: The description of the input field.
  • ErrorMessage: The error message of the input field.

You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:

Datebox

  • Class: The CSS class names to style the datebox wrapper.
  • Classes: The CSS class names to style the datebox slots. 
<LumexDatebox TValue="DateTime?"
              Label="Birth date"
              Radius="@Radius.Large"
              Clearable="@true"
              Classes="@_classes">
    <StartContent>
        <CalendarClockIcon Size="18" class="text-secondary-400 shrink-0" />
    </StartContent>
</LumexDatebox>

@code {
    private InputFieldSlots _classes = new()
    {
        Label = "text-default-700",
        InnerWrapper = "bg-transparent",
        InputWrapper = ElementClass.Empty()
            .Add("shadow-xl")
            .Add("bg-default-200/50")
            .Add("backdrop-blur-xl")
            .Add("backdrop-saturate-200")
            .Add("hover:bg-default-200/70")
            .Add("group-data-[focus=true]:bg-default-200/85")
            .ToString(),
        Input = ElementClass.Empty()
            .Add("bg-transparent")
            .Add("text-default-900")
            .Add("placeholder:text-default-500")
            .ToString()
    };
}

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

An unhandled error has occurred. Reload 🗙