Date Field

States

A segmented keyboard-driven date input. Each section (month, day, year) is independently editable via keyboard.

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

html

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

Property	Attribute	Type	Default	Description
`value`	`value`	`string`	`''`	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.
`errorMessage`	`error-message`	`string`	`''`	Error message displayed below the field when in error state.

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

Name	Description
`base`	The component's base wrapper element.

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`	—

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

Date Field ​