# Date input

Status: stable

A date, using the browser date picker.

Date inputs use the browser's own date picker, so managers get the calendar they already know on desktop and phone. They use the same at-input class as a text input, with type="date".

The value is always sent as YYYY-MM-DD, whatever the browser shows on screen. Show dates back to managers as "4 Oct 2026".

## Example

```html
<div class="at-field"><label class="at-label" for="d-start">Start date</label><input class="at-input" id="d-start" type="date" value="2026-10-14" /></div>
```

## Anatomy

1. **Label**: font-size: var(--at-text-sm) /* 14px */; font-weight: var(--at-weight-bold)

2. **Hint (optional)**: font-size: var(--at-text-sm); color: var(--at-text-subtle)

3. **Field**: class: at-input, type="date"; min-height: 36px; calendar icon and picker: drawn by the browser

## Size and spacing

- **Field**: min-height: 36px; width: 100% of its container

- **Limits**: min="2026-01-01" and max="..." stop out-of-range dates in the picker

## Variants

### Date input

Set min and max when only some dates make sense, for example no start dates in the past.

```html
<div class="at-field"><label class="at-label" for="v-due">Due date</label><input class="at-input" id="v-due" type="date" min="2026-10-05" /></div>
```

| State | Specification |

|---|---|

| Default | border: 1px solid var(--at-border) |

| Hover | border-color: var(--at-text-subtle) |

| Focus | outline: 3px solid var(--at-border-focus) |

| Error | border: 2px solid var(--at-border-danger); plus an .at-error message |

| Disabled | opacity: 0.5 |

## When to use

- Any single date: a start date, a due date, an inspection date.

## When not to use

- A date of birth or other date far in the past: three text inputs (day, month, year) are quicker.
- A month only: use a select.

## Content

- Label with what the date is for: "Start date", not "Date".
- Error messages give an example: "Enter a date after 5 Oct 2026".

## Do and don't

Do: The browser picker, labelled with what the date is for.

```html
<div class="at-field"><label class="at-label" for="dd-d1">Inspection date</label><input class="at-input" id="dd-d1" type="date" /></div>
```

Don't: A text box with a US-format placeholder.

```html
<div class="at-field"><label class="at-label" for="dd-d2">Date</label><input class="at-input" id="dd-d2" type="text" placeholder="MM/DD/YYYY" /></div>
```

## Do

- Use the native date input.

## Don't

- Add a third-party date picker.

## Code

```html
<div class="at-field">
  <label class="at-label" for="start">Start date</label>
  <input class="at-input" id="start" type="date" />
</div>
```

## Classes

| Class | What it does |

|---|---|

| `at-input with type="date"` | Native date input |

## Tokens

`--at-border`, `--at-surface`, `--at-text`, `--at-border-bold`

## Accessibility

- The native input supports keyboard entry.