LumexUI · desmondinho · Jan 4, 2026 · Sep 12, 2025 · Sep 12, 2025 · Sep 13, 2025
@@ -32,6 +32,7 @@ public class NavigationStore
 			.Add( new( nameof( LumexChip ), PageStatus.New ) )
 			.Add( new( nameof( LumexCollapse ) ) )
 			.Add( new( nameof( LumexDataGrid<T> ) ) )
+			.Add( new( nameof( LumexDatebox<T> ), PageStatus.New ) )
 			.Add( new( nameof( LumexDivider ) ) )
 			.Add( new( nameof( LumexDropdown ) ) )
 			.Add( new( nameof( LumexLink ) ) )
@@ -67,6 +68,7 @@ public class NavigationStore
 			.Add( new( nameof( LumexComponent ) ) )
 			//.Add( nameof( LumexComponentBase ) )
 			//.Add( nameof( LumexDebouncedInputBase<T> ) )
+			.Add( new( nameof( LumexDatebox<T> ) ) )
 			.Add( new( nameof( LumexDivider ) ) )
 			.Add( new( nameof( LumexDropdown ) ) )
 			.Add( new( nameof( LumexDropdownItem ) ) )

@@ -0,0 +1,166 @@
+@page "/docs/components/datebox"
+@layout DocsContentLayout
+
+@using LumexUI.Docs.Client.Pages.Components.Datebox.PreviewCodes
+
+<DocsSection Title="Types">
+    <p>
+        The datebox component is almost identical to the
+        <LumexLink Href="/docs/components/textbox">textbox</LumexLink>
+        but includes additional features specific to date input.
+    </p>
+    <p>
+        It supports various date types, including
+        <code>DateTime</code>, <code>DateTimeOffset</code>, <code>DateOnly</code>,
+        <code>TimeOnly</code>. Additionally, their nullable counterparts are also supported.
+    </p>
+</DocsSection>
+
+<DocsSection Title="Usage">
+    <Usage />
+
+    <DocsSection Title="Disabled">
+        <Disabled />
+    </DocsSection>
+
+    <DocsSection Title="Read-Only">
+        <ReadOnly />
+    </DocsSection>
+
+    <DocsSection Title="Required">
+        <Required />
+    </DocsSection>
+
+    <DocsSection Title="Sizes">
+        <Sizes />
+    </DocsSection>
+
+    <DocsSection Title="Radius">
+        <Radius />
+    </DocsSection>
+
+    <DocsSection Title="Colors">
+        <Colors />
+    </DocsSection>
+
+    <DocsSection Title="Variants">
+        <Variants />
+    </DocsSection>
+
+    <DocsSection Title="Label Placements">
+        <LabelPlacements />
+    </DocsSection>
+
+    <LumexAlert Radius="@LumexUI.Common.Radius.Large" Class="my-6 [&_code]:text-current">
+        <DescriptionContent>
+            If the <code>Label</code> parameter is not set, the <code>LabelPlacement</code>
+            parameter will default to <code>Outside</code>.
+        </DescriptionContent>
+    </LumexAlert>
+
+    <DocsSection Title="Clear Button">
+        <ClearButton />
+    </DocsSection>
+
+    <DocsSection Title="Start & End Content">
+        <StartEndContent />
+    </DocsSection>
+
+    <DocsSection Title="Description">
+        <Description />
+    </DocsSection>
+
+    <DocsSection Title="Error Message">
+        <p>
+            Display an error message below the datebox to indicate validation issues.
+            You can combine the <code>Invalid</code> and <code>ErrorMessage</code> parameters to show an invalid input.
+            An error message is shown only when the <code>Invalid</code> parameter is set to <code>true</code>.
+        </p>
+
+        <ErrorMessage />
+    </DocsSection>
+
+    <DocsSection Title="Two-way Data Binding">
+        <p>
+            Use <code>@@bind-Value</code> directive or <code>Value</code> and <code>ValueChanged</code>
+            parameters to manually control datebox value.
+        </p>
+        <TwoWayDataBinding />
+    </DocsSection>
+</DocsSection>
+
+<DocsSlotsSection Slots="@_slots">
+    <div>
+        <h4 class="font-semibold">Datebox</h4>
+
+        <ul>
+            <li>
+                <code>Class</code>: The CSS class names to style the datebox wrapper.
+            </li>
+
+            <li>
+                <code>Classes</code>: The CSS class names to style the datebox slots.
+            </li>
+        </ul>
+    </div>
+    <CustomStyles />
+</DocsSlotsSection>
+
+<DocsApiSection Components="@_apiComponents" />
+
+@code {
+    [CascadingParameter]
+    private DocsContentLayout Layout { get; set; } = default!;
+
+    private readonly Heading[] _headings = new Heading[]
+    {
+        new("Types"),
+        new("Usage", [
+            new("Disabled"),
+            new("Read-Only"),
+            new("Required"),
+            new("Sizes"),
+            new("Radius"),
+            new("Colors"),
+            new("Variants"),
+            new("Label Placements"),
+            new("Clear Button"),
+            new("Start & End Content"),
+            new("Description"),
+            new("Error message"),
+            new("Two-way Data Binding"),
+        ]),
+        new("Custom Styles"),
+        new("API")
+    };
+
+    private readonly Slot[] _slots = new Slot[]
+    {
+        new(nameof(InputFieldSlots.Base), "The overall wrapper."),
+        new(nameof(InputFieldSlots.Label), "The label element."),
+        new(nameof(InputFieldSlots.MainWrapper), "The wrapper of the input wrapper (when the label is outside)."),
+        new(nameof(InputFieldSlots.InputWrapper), "The wrapper of the label and the inner wrapper (when the label is inside)."),
+        new(nameof(InputFieldSlots.InnerWrapper), "The wrapper of the input, start/end content."),
+        new(nameof(InputFieldSlots.Input), "The input element."),
+        new(nameof(InputFieldSlots.ClearButton), "The clear button element."),
+        new(nameof(InputFieldSlots.HelperWrapper), "The wrapper of a description and an error message."),
+        new(nameof(InputFieldSlots.Description), "The description of the input field."),
+        new(nameof(InputFieldSlots.ErrorMessage), "The error message of the input field.")
+    };
+
+    private readonly string[] _apiComponents = new string[]
+    {
+        nameof(LumexDatebox<T>)
+    };
+
+    protected override void OnInitialized()
+    {
+        Layout.Initialize(
+            title: "Datebox",
+            category: "Components",
+            description: "Datebox allows users to enter and edit date values.",
+            headings: _headings,
+            linksProps: new ComponentLinksProps("Datebox", isServer: false)
+        );
+    }
+}
@@ -0,0 +1,9 @@
+<LumexDatebox Clearable="@true"
+              Label="Birth date"
+              Variant="@InputVariant.Outlined"
+              Value="@_value"
+              Class="max-w-xs" />
+
+@code {
+    private DateTime? _value = DateTime.Now;
+}
@@ -0,0 +1,27 @@
+<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
+    ];
+}
@@ -0,0 +1,30 @@
+<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()
+    };
+}
@@ -0,0 +1,4 @@
+<LumexDatebox TValue="DateTime?"
+              Label="Birth date"
+              Description="We'll never share your birthday with anyone else."
+              Class="max-w-xs" />
@@ -0,0 +1,4 @@
+<LumexDatebox TValue="DateTime?"
+              Disabled="true"
+              Label="Birth date"
+              Class="max-w-xs" />
@@ -0,0 +1,64 @@
+@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.UtcNow;
+        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");
+        }
+    }
+}
@@ -0,0 +1,22 @@
+<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
+    ];
+}
@@ -0,0 +1,4 @@
+<LumexDatebox TValue="DateTime?"
+              ReadOnly="@true"
+              Label="Bbirth date"
+              Class="max-w-xs" />
@@ -0,0 +1,4 @@
+<LumexDatebox TValue="DateTime?"
+              Required="@true"
+              Label="Birth date"
+              Class="max-w-xs" />
@@ -0,0 +1,21 @@
+<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
+    ];
+}