# Known Date

**Full documentation:** https://webawesome.com/docs/components/known-date


`<wa-known-date>`

Experimental [Since 3.8](https://webawesome.com/docs/resources/changelog#wa_380)

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](https://design-system.service.gov.uk/components/date-input/): a labeled `<fieldset>` wraps three plain `<input>` elements, the user types each part themselves, and the host submits a single canonical ISO date.

```html
<wa-known-date label="When was your passport issued?"></wa-known-date>
```

For dates the user needs help finding (scheduling, ranges, browsing), use [`<wa-date-input>`](https://webawesome.com/docs/components/date-input) instead. Known Date is intentionally simple: no popup calendar, no auto-advance between fields, and no clever parsing.

## Form Submission

Link to This Section

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

-   A complete, real calendar date is submitted as `YYYY-MM-DD`.
-   A partial entry (one or two fields filled) submits no value — the form data omits the entry entirely.
-   An invalid combination such as 30 February submits no value.

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

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

<style>
  #kd-form-demo-output {
    margin-block-start: 1rem;
    margin-block-end: 0;
    padding: 0.75rem;
    background: var(--wa-color-surface-lowered);
    border-radius: var(--wa-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

Link to This Section

### Initial Value

Link to This Section

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

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

### Hint

Link to This Section

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.

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

### Locale-Aware Field Order

Link to This Section

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.

```html
<wa-known-date label="UK order" lang="en-GB"></wa-known-date>
<br />
<wa-known-date label="US order" lang="en-US"></wa-known-date>
<br />
<wa-known-date label="Japanese order" lang="ja-JP"></wa-known-date>
```

### Min and Max

Link to This Section

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

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

### Required

Link to This Section

Set `required` to make the date input required for form submission. Submitting a form with an empty or partially filled date input triggers the standard browser validation flow and a localized error message appears inside the fieldset.

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

### Disabled and Readonly

Link to This Section

```html
<wa-known-date label="Disabled" value="2007-03-27" disabled></wa-known-date>
<br />
<wa-known-date label="Readonly" value="2007-03-27" readonly></wa-known-date>
```

### Autocomplete

Link to This Section

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

```html
<wa-known-date label="Date of birth" autocomplete="bday"></wa-known-date>
```

### Sizes

Link to This Section

```html
<wa-known-date label="Extra small" size="xs"></wa-known-date>
<br />
<wa-known-date label="Small" size="s"></wa-known-date>
<br />
<wa-known-date label="Medium (default)" size="m"></wa-known-date>
<br />
<wa-known-date label="Large" size="l"></wa-known-date>
<br />
<wa-known-date label="Extra large" size="xl"></wa-known-date>
```

### Appearances

Link to This Section

```html
<wa-known-date label="Outlined (default)" appearance="outlined"></wa-known-date>
<br />
<wa-known-date label="Filled" appearance="filled"></wa-known-date>
<br />
<wa-known-date label="Filled outlined" appearance="filled-outlined"></wa-known-date>
```

### Pill

Link to This Section

Use the `pill` attribute to give each field rounded edges.

```html
<wa-known-date label="Pill" pill></wa-known-date>
```

## Importing

Link to This Section

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

\*\*CDN\*\*

Import this component directly from the CDN:

```js
import 'https://ka-f.webawesome.com/webawesome@3.8.0/components/known-date/known-date.js';
```

\*\*npm\*\*

After installing Web Awesome via npm, import this component:

```js
import '@awesome.me/webawesome/dist/components/known-date/known-date.js';
```

\*\*Self-Hosted\*\*

If you're self-hosting Web Awesome, import this component from your server:

```js
import './webawesome/dist/components/known-date/known-date.js';
```

\*\*React\*\*

To import this component for React 18 or below, use the following code:

```js
import WaKnownDate from '@awesome.me/webawesome/dist/react/known-date/index.js';
```

## Slots

Link to This Section

Learn more about [using slots](https://webawesome.com/docs/usage/#slots).

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

## Attributes & Properties

Link to This Section

Learn more about [attributes and properties](https://webawesome.com/docs/usage/#attributes-and-properties).

| Name | Description | Reflects |
| --- | --- | --- |
| \`appearance\` appearance | \`WaKnownDateAppearance\` The known date's visual appearance. Type Default 'outlined' | | |
| \`autocomplete\` autocomplete | \`bday\` Browser autofill family. When set to , 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. Type string Default '' | | |
| \`defaultValue\` value | \`string\` The default value used for form reset. Type | | |
| \`disabled\` disabled | \`boolean\` Disables the known date. Type Default false | | |
| \`form\` | \`

\` By default, form controls are associated with the nearest containing 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. Type HTMLFormElement \\| null | | |
| \`hint\` hint | \`hint\` The known date's . If you need to display HTML, use the hint slot instead. Type string Default '' | | |
| \`label\` label | \`label\` The known date's . If you need to display HTML, use the label slot instead. Type string Default '' | | |
| \`locale\` locale | \`lang\` BCP-47 locale override. When empty, the inherited attribute is used. Type string Default '' | | |
| \`max\` max | \`YYYY-MM-DD\` Latest selectable date as . Type string Default '' | | |
| \`min\` min | \`YYYY-MM-DD\` Earliest selectable date as . Type string Default '' | | |
| \`name\` name | \`string \\| null\` The name submitted with form data. Type Default '' | | |
| \`parts\` | \`DateParts\` The three field strings. Stored verbatim so user-typed digits round-trip faithfully. Type Default { ...EMPTY\_PARTS } | | |
| \`pill\` pill | \`boolean\` Draws pill-style fields with rounded edges. Type Default false | | |
| \`readonly\` readonly | \`boolean\` Makes the fields non-editable. Type Default false | | |
| \`required\` required | \`boolean\` Makes the known date required for form submission. Type Default false | | |
| \`size\` size | \`WaKnownDateSize \\| 'small' \\| 'medium' \\| 'large'\` The known date's size. Type Default 'm' | | |
| \`validationTarget\` | \`display: none\` Anchor native validation popups on a real visible input. The hidden mirror handles form data, but anchoring a popup on content would render it at offset (0, 0). Type undefined \\| HTMLElement | | |
| \`validators\` | \`observedAttributes\` Validators are static because they have , essentially attributes to "watch" for changes. Whenever these attributes change, we want to be notified and update the validator. Type Validator\[\] Default \[\] | | |
| \`value\` | \`YYYY-MM-DD\` The committed value as an ISO 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. Type string | | |
| \`valueAsDate\` | \`Date\` The committed value as a , or null when the value is empty/invalid. Type Date \\| null | | |
| \`valueInput\` | \`HTMLInputElement\` Hidden mirror used for native constraint validation (min/max/required + valid-date roundtrip). Type | | |
| \`withHint\` with-hint | \`true\` Only required for SSR. Set to if you're slotting in a hint element. Type boolean Default false | | |
| \`withLabel\` with-label | \`true\` Only required for SSR. Set to if you're slotting in a label element. Type boolean Default false | | |

## Methods

Link to This Section

Learn more about [methods](https://webawesome.com/docs/usage/#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

Link to This Section

Learn more about [events](https://webawesome.com/docs/usage/#events).

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

## Custom States

Link to This Section

Learn more about [custom states](https://webawesome.com/docs/usage/#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

Link to This Section

Learn more about [CSS parts](https://webawesome.com/docs/usage/#css-parts).

| Name | Description | CSS selector |
| --- | --- | --- |
| \`base\` | The component's outer wrapper (alias of the fields row). | \`::part(base)\` |
| \`error\` | \`\` The inline error message region. This is an intentional difference from and , which rely on the browser's native validation popup. Because this control is composed of three separate fields, an inline role="alert" region gives a single, predictable place to surface the validation message rather than anchoring a native popup on one of the three fields. | \`::part(error)\` |
| \`field\` | Each field block (label + input). | \`::part(field)\` |
| \`field-day\` | Added to the day field block. | \`::part(field-day)\` |
| \`field-input\` | \`\` The native 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 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)\` |
| \`label\` | Alias on the legend's inner label wrapper. | \`::part(label)\` |
| \`legend\` | \`\` The element (when a label is present). | \`::part(legend)\` |

**Need a hand?** Report a bug Ask for help