Date Field

States

Loading...

— move between segments - Backspace / Delete — clear the current segment - Escape / a — clear all segments

• Tag: <flint-date-field>
• Class: FlintDateField
• Form Associated: Yes

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintDateField } from 'flint-ui';

Usage

<flint-date-field></flint-date-field>

Properties

Property	Attribute	Type	Default	Description
value	value	string	''	Opts the element into form participation via the Form-Associated Custom Elements API. / static formAssociated = true; static styles = unsafeCSS(uiDateFieldStyles); // ── Props ──────────────────────────────────────────────────────────────── /* Controlled date value (ISO YYYY-MM-DD). Set to '' for uncontrolled.
label	label	string	''	Field label.
name	name	string	''	Form field name. Reflected so the browser picks it up for form data collection.
min	min	string	''	Minimum allowed date (ISO).
max	max	string	''	Maximum allowed date (ISO).
disabled	disabled	boolean	false	Disables the field and prevents interaction.
readonly	readonly	boolean	false	Makes the field read-only (visible but not editable).
error	error	boolean	false	Displays the field in an error state.
helperText	helper-text	string	''	Helper text shown below the field.

Events

Event	Detail	Description
flint-date-field-change	—	{ detail: { value: string } } ISO date when all three segments are filled
flint-date-field-clear	—	Fired when all segments are cleared

CSS Custom Properties

Property	Default
--flint-font-family	—
--flint-text-color-muted	—
--flint-error-color	—
--flint-primary-color	—
--flint-input-bg	—
--flint-border-color	—
--flint-border-radius-md	—
--flint-primary-focus-ring	—
--flint-error-focus-ring	—
--flint-input-disabled-bg	—
--flint-text-color	—
--flint-input-placeholder-color	—
--flint-text-color-on-primary	—
--flint-hover-color	—

Methods

Method	Description
clear()	Clears all three segments and fires 'flint-date-field-clear'.

---