Known Date

<cs-known-date>

Experimental

Since 0.1

Known dates let users enter dates they already know - birthdays, expirations, document dates - through three separate day, month, and year fields shown in the locale's natural order.

Known Date collects a date the user already knows — a birthday, a passport issue date, an expiration — through three separate fields for day, month, and year. It follows the UK Government Design System date input pattern: a labeled <fieldset> wraps three plain <input> elements, the user types each part themselves, and the host submits a single canonical ISO date.

<cs-known-date label="When was your passport issued?"></cs-known-date>

Need a calendar, ranges, or browsing?
Known Date is intentionally simple: no popup calendar, no auto-advance between fields, and no clever parsing. For anything richer, pair a native <input type="date"> with the field or reach for a dedicated date picker.

Form Submission

The hidden form value is canonical ISO 8601 (YYYY-MM-DD), regardless of the locale used to render the fields:

Entry	Form value
Complete, valid date	`YYYY-MM-DD` (e.g. `2007-03-27`)
Partial (one or two fields)	(empty) — omitted from form data
Invalid date (e.g. 30 February)	(empty)

<form id="kd-form-demo">
  <cs-known-date name="dob" label="Date of birth" required value="2007-03-27"></cs-known-date>
  <br />
  <cs-button type="submit" appearance="filled" variant="neutral">Submit</cs-button>
</form>

<pre id="kd-form-demo-output"></pre>

<style>
  #kd-form-demo-output {
    margin-block-start: var(--cs-space-m);
    margin-block-end: 0;
    padding: var(--cs-space-s);
    background: var(--cs-color-surface-lowered);
    border-radius: var(--cs-border-radius-m);
    font-size: 0.875em;
  }

  #kd-form-demo-output:empty {
    display: none;
  }
</style>

<script>
  const form = document.getElementById('kd-form-demo');
  const output = document.getElementById('kd-form-demo-output');

  form.addEventListener('submit', event => {
    event.preventDefault();
    const data = new FormData(form);
    const entries = Object.fromEntries(data.entries());
    const formatted = JSON.stringify(entries, null, 2);
    output.textContent = 'Submitted FormData:\n' + formatted;
  });
</script>

Examples

Initial Value

Set the value attribute to an ISO date to pre-fill the three fields.

<cs-known-date label="Date of birth" value="1990-04-15"></cs-known-date>

Hint

Use the hint attribute (or slot) to show an example value. The hint is associated with each field via aria-describedby, so screen readers announce it when any field receives focus.

<cs-known-date label="When was your passport issued?" hint="For example, 27 3 2007"></cs-known-date>

Locale-Aware Field Order

The three fields render in the natural order for the inherited lang (or the explicit locale attribute). The labels stay the same; only the position changes.

<div class="cs-stack">
  <cs-known-date label="UK order" lang="en-GB"></cs-known-date>
  <cs-known-date label="US order" lang="en-US"></cs-known-date>
  <cs-known-date label="Japanese order" lang="ja-JP"></cs-known-date>
</div>

Min & Max

Constrain the accepted range with min and max. Values outside the range are reported as invalid.

<cs-known-date label="Birthday" min="1900-01-01" max="2099-12-31"></cs-known-date>

Required

Set required to make the date input required for form submission. Like other form controls, validation surfaces through the browser’s native constraint validation flow: submitting a form with an empty or partially filled date input prevents submission and shows the browser’s validation message. No error appears while the user is simply filling in or tabbing between the fields.

<form>
  <cs-known-date label="Date of birth" required></cs-known-date>
  <br />
  <cs-button type="submit" appearance="filled" variant="neutral">Submit</cs-button>
</form>

Disabled

Use the disabled attribute to disable a date field.

<cs-known-date label="Birthday" value="2007-03-27" disabled></cs-known-date>

Readonly

Use the readonly attribute to keep a value visible but uneditable. Unlike disabled, a readonly date field stays focusable and its value is still submitted with the form.

<cs-known-date label="Member since" value="2007-03-27" readonly></cs-known-date>

Autocomplete

Set autocomplete="bday" to enable browser autofill for birthdays. The host expands the family into per-field tokens (bday-day, bday-month, bday-year).

<cs-known-date label="Date of birth" autocomplete="bday"></cs-known-date>

Size

<div class="cs-stack">
  <cs-known-date label="Extra small" size="xs"></cs-known-date>
  <cs-known-date label="Small" size="s"></cs-known-date>
  <cs-known-date label="Medium (default)" size="m"></cs-known-date>
  <cs-known-date label="Large" size="l"></cs-known-date>
  <cs-known-date label="Extra large" size="xl"></cs-known-date>
</div>

Appearance

<div class="cs-stack">
  <cs-known-date label="Outlined (default)" appearance="outlined"></cs-known-date>
  <cs-known-date label="Filled" appearance="filled"></cs-known-date>
  <cs-known-date label="Filled outlined" appearance="filled-outlined"></cs-known-date>
</div>

Pill

Use the pill attribute to give each field rounded edges.

<cs-known-date label="Pill" pill></cs-known-date>

API

Importing

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick this component, use one of the following snippets.

npm

Self-Hosted

React

import '@cruglobal/cornerstone-components/components/known-date/known-date.js';

import './cornerstone/components/known-date/known-date.js';

import CsKnownDate from '@cruglobal/cornerstone-components/react/known-date/index.js';

Slots

Learn more about using slots.

Name	Description
`hint`	Text that describes how to use the known date. Alternatively, use the `hint` attribute.
`label`	The known date's group label. Alternatively, use the `label` attribute.

Attributes & Properties

Learn more about attributes and properties.

Property	Attribute	Description	Type	Default	Reflects
`appearance`	`appearance`	The known date's visual appearance.	`CsKnownDateAppearance`	`'outlined'`	Yes
`autocomplete`	`autocomplete`	Browser autofill family. When set to `bday`, the three fields receive `bday-day`, `bday-month`, and `bday-year` respectively. The field-agnostic directives `off` and `on` are applied to all three fields. Any other value is forwarded only to the year field.	`string`	`''`	—
`defaultValue`	`value`	The default value used for form reset.	`string`	—	Yes
`disabled`	`disabled`	Disables the known date.	`boolean`	`false`	—
`form`	—	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	`HTMLFormElement \| null`	—	—
`hint`	`hint`	The known date's hint. If you need to display HTML, use the `hint` slot instead.	`string`	`''`	—
`label`	`label`	The known date's label. If you need to display HTML, use the `label` slot instead.	`string`	`''`	—
`locale`	`locale`	BCP-47 locale override. When empty, the inherited `lang` attribute is used.	`string`	`''`	Yes
`max`	`max`	Latest selectable date as `YYYY-MM-DD`.	`string`	`''`	Yes
`min`	`min`	Earliest selectable date as `YYYY-MM-DD`.	`string`	`''`	Yes
`name`	`name`	The name submitted with form data.	`string \| null`	`''`	Yes
`parts`	—	The three field strings. Stored verbatim so user-typed digits round-trip faithfully.	`DateParts`	`{ ...EMPTY_PARTS }`	—
`pill`	`pill`	Draws pill-style fields with rounded edges.	`boolean`	`false`	Yes
`readonly`	`readonly`	Makes the fields non-editable.	`boolean`	`false`	Yes
`required`	`required`	Makes the known date required for form submission.	`boolean`	`false`	Yes
`size`	`size`	The known date's size.	`CsKnownDateSize`	`'m'`	Yes
`ssrHint`	`ssr-hint`	Only required for SSR. Set to `true` if you're slotting in a `hint` element.	`boolean`	`false`	—
`ssrLabel`	`ssr-label`	Only required for SSR. Set to `true` if you're slotting in a `label` element.	`boolean`	`false`	—
`validationTarget`	—	Anchor native validation popups on a real visible input. The hidden mirror handles form data, but anchoring a popup on `display: none` content would render it at offset (0, 0).	`undefined \| HTMLElement`	—	—
`validators`	—	Validators are static because they have `observedAttributes`, essentially attributes to "watch" for changes. Whenever these attributes change, we want to be notified and update the validator.	`Validator[]`	`[]`	—
`value`	—	The committed value as an ISO `YYYY-MM-DD` string. The setter also accepts a `Date` or `null`. Reading returns an empty string when the value is blank or any field is only partially filled.	`string`	—	—
`valueAsDate`	—	The committed value as a `Date`, or `null` when the value is empty/invalid.	`Date \| null`	—	—
`valueInput`	—	Hidden mirror used for native constraint validation (min/max/required + valid-date roundtrip).	`HTMLInputElement`	—	—

Methods

Learn more about methods.

Name	Description	Arguments
`blur()`	Removes focus from the known date.	—
`focus()`	Focuses the first empty field, or the first field when all are filled.	`options: FocusOptions`
`formStateRestoreCallback()`	Called when the browser is trying to restore element’s state to state in which case reason is "restore", or when the browser is trying to fulfill autofill on behalf of user in which case reason is "autocomplete". In the case of "restore", state is a string, File, or FormData object previously set as the second argument to setFormValue.	`state: string \| File \| FormData \| null`
`resetValidity()`	Reset validity is a way of removing manual custom errors and native validation.	—
`setCustomValidity()`	Do not use this when creating a "Validator". This is intended for end users of components. We track manually defined custom errors so we don't clear them on accident in our validators.	`message: string`

Events

Learn more about events.

Name	Description
`blur`	Emitted when the control loses focus.
`change`	Emitted when the committed value transitions to a new ISO date.
`cs-invalid`	Emitted when the form control has been checked for validity and its constraints aren't satisfied.
`focus`	Emitted when the control gains focus.
`input`	Emitted as the user types in any field.

Custom States

Learn more about custom states.

Name	Description	CSS selector
`blank`	The known date has no committed value.	`:state(blank)`
`disabled`	The known date is disabled.	`:state(disabled)`

CSS Parts

Learn more about CSS parts.

Name	Description	CSS selector
`field`	Each field block (label + input).	`::part(field)`
`field-day`	Added to the day field block.	`::part(field-day)`
`field-input`	The native `<input>` inside a field.	`::part(field-input)`
`field-label`	The text label above each field's input.	`::part(field-label)`
`field-month`	Added to the month field block.	`::part(field-month)`
`field-year`	Added to the year field block.	`::part(field-year)`
`fields`	The flex row holding the three field blocks.	`::part(fields)`
`fieldset`	The `<fieldset>` element grouping the three fields (or a `role="group"` div).	`::part(fieldset)`
`form-control`	The form control's outer wrapper.	`::part(form-control)`
`form-control-input`	Alias on the fields row matching other form controls.	`::part(form-control-input)`
`form-control-label`	The wrapper inside the legend that styles the visible label text.	`::part(form-control-label)`
`hint`	The hint's wrapper.	`::part(hint)`
`known-date`	The component's outer wrapper.	`::part(known-date)`
`legend`	The `<legend>` element (when a label is present).	`::part(legend)`

Quick Links

Recent Searches