Date Input
Masked text input for typing dates and times, with automatic formatting, min and max limits, and validation.
import { DateInput } from "@plexui/ui/components/DateInput";Examples
Overview
variant
size
With time
With seconds
Limits
US format
ISO format
With Field
Enter your date of birth
Validation
Date is required
Disabled
API
| Prop | Type | Default | Description |
|---|---|---|---|
value | DateTime | null | — | Required. Selected date (Luxon DateTime) |
onChange | (date: DateTime | null) => void | — | Required. Called when a complete valid date is entered or the field is cleared |
mode | MaskitoDateMode | "dd/mm/yyyy" | Date format mode: dd/mm/yyyy, mm/dd/yyyy, yyyy/mm/dd, etc. |
separator | string | "." | Character between date parts |
timeMode | MaskitoTimeMode | — | Enable time input: HH:MM, HH:MM:SS, etc. |
dateTimeSeparator | string | ", " | Separator between date and time parts |
timeStep | number | 0 | Arrow-key increment step for time segments |
min | DateTime | — | Earliest allowed date |
max | DateTime | — | Latest allowed date |
clearable | boolean | false | Show clear button when input has a value |
size | ControlSize | "md" | Input size (3xs to 3xl) |
variant | "outline" | "soft" | "outline" | Visual style |
pill | boolean | false | Fully rounded corners |
disabled | boolean | false | Disable input |
invalid | boolean | false | Mark as invalid |
placeholder | string | — | Generated from the format if not set |
Other props, such as startAdornment and endAdornment, go to the underlying Input. The mask is Maskito (@maskito/react).
Styling
Date Input reads these component tokens. Override them at any scope to restyle it:
--input-border-color-invalid: border color invalid (defaultvar(--color-border-danger-outline))--input-gap-lg: gap lg (default10px)--input-gap-md: gap md (default8px)--input-gap-sm: gap sm (default6px)--input-gap-xs: gap xs (default4px)--input-outline-border-color: outline border color (defaultvar(--color-border-primary-outline))--input-outline-border-color-focus: outline border color focus (defaultvar(--alpha-50))--input-outline-border-color-hover: outline border color hover (defaultlight-dark(var(--alpha-25), var(--alpha-30)))--input-placeholder-text-color: placeholder text color (defaultvar(--color-text-tertiary))--input-soft-background-color: soft background color (defaultvar(--color-background-primary-soft-alpha))--input-soft-border-color-focus: soft border color focus (defaultvar(--alpha-20))--input-text-color: text color (defaultvar(--color-text))