Date Input

A date field that opens an always-visible calendar for selection. Built on top of lt-calendar, it supports locale-aware display (including a week start that follows locale by default), min/max constraints, validation variants, and keyboard navigation.

Date Input vs Datepicker — Use lt-date-input when you need a consistent cross-browser UI, locale-aware display formatting, or the visual calendar grid. Choose lt-datepicker instead when you need native type="time" or type="datetime-local" support, zero-JavaScript form integration, or prefer to delegate the picker UI to the operating system.

Playground

Controls

Value

Min

Max

Locale

Format

Week Start

Label

Placeholder

Helper Text

Variant

Size

Disabled

Required

Name

Disabled Dates

Labels

Theme

HTMLReact

ShareCopy

Usage

<!-- Basic -->
<lt-date-input></lt-date-input>

<!-- With label -->

<lt-date-input label="Start date"></lt-date-input>

<!-- Pre-selected date -->

<lt-date-input label="Appointment" value="2026-06-15"></lt-date-input>

<!-- Min / max constraints -->

<lt-date-input label="Date" min="2026-01-01" max="2026-12-31"></lt-date-input>

<!-- Display format -->

<lt-date-input label="Short" format="short" value="2026-06-15"></lt-date-input>
<lt-date-input label="Medium (default)" format="medium" value="2026-06-15"></lt-date-input>
<lt-date-input label="Long" format="long" value="2026-06-15"></lt-date-input>
<lt-date-input label="Full" format="full" value="2026-06-15"></lt-date-input>

<!-- Validation variant -->

<lt-date-input label="Date" variant="error" helper-text="Date is required"></lt-date-input>

<!-- French locale — week start follows the locale automatically (Monday) -->

<lt-date-input locale="fr-FR"></lt-date-input>

<!-- Sizes -->

<lt-date-input size="sm" placeholder="Small"></lt-date-input>
<lt-date-input size="md" placeholder="Medium (default)"></lt-date-input>
<lt-date-input size="lg" placeholder="Large"></lt-date-input>

<!-- Disabled -->

<lt-date-input disabled value="2026-06-15"></lt-date-input>

import { DateInput } from '@latty-ds/react';

// Basic

<DateInput />

// With label

<DateInput label="Start date" />

// Pre-selected date

<DateInput label="Appointment" value="2026-06-15" />

// Min / max constraints

<DateInput label="Date" min="2026-01-01" max="2026-12-31" />

// Display format

<DateInput label="Short" format="short" value="2026-06-15" />
<DateInput label="Medium (default)" format="medium" value="2026-06-15" />
<DateInput label="Long" format="long" value="2026-06-15" />
<DateInput label="Full" format="full" value="2026-06-15" />

// Validation variant

<DateInput label="Date" variant="error" helperText="Date is required" />

// French locale — week start follows the locale automatically (Monday)

<DateInput locale="fr-FR" />

// Sizes

<DateInput size="sm" placeholder="Small" />
<DateInput size="md" placeholder="Medium (default)" />
<DateInput size="lg" placeholder="Large" />

// Disabled

<DateInput disabled value="2026-06-15" />

<template>
<!-- Basic -->
<lt-date-input></lt-date-input>

<!-- With label -->

<lt-date-input label="Start date"></lt-date-input>

<!-- Pre-selected date -->

<lt-date-input label="Appointment" value="2026-06-15"></lt-date-input>

<!-- Min / max constraints -->

<lt-date-input label="Date" min="2026-01-01" max="2026-12-31"></lt-date-input>

<!-- Display format -->

<lt-date-input label="Short" format="short" value="2026-06-15"></lt-date-input>
<lt-date-input label="Medium (default)" format="medium" value="2026-06-15"></lt-date-input>
<lt-date-input label="Long" format="long" value="2026-06-15"></lt-date-input>
<lt-date-input label="Full" format="full" value="2026-06-15"></lt-date-input>

<!-- Validation variant -->

<lt-date-input label="Date" variant="error" helper-text="Date is required"></lt-date-input>

<!-- French locale — week start follows the locale automatically (Monday) -->

<lt-date-input locale="fr-FR"></lt-date-input>

<!-- Sizes -->

<lt-date-input size="sm" placeholder="Small"></lt-date-input>
<lt-date-input size="md" placeholder="Medium (default)"></lt-date-input>
<lt-date-input size="lg" placeholder="Large"></lt-date-input>

<!-- Disabled -->

<lt-date-input disabled value="2026-06-15"></lt-date-input>

</template>

API