Skip to content
COHO
Atrium design system

COHO docs

Atrium

COHO

v0.1
AI Building

Build an Atrium app with AI

One minimised file with everything an AI tool needs: how to work, the hard rules, the full app contract and the design system. Upload it to any LLM, then describe your app.

ATRIUM-AI-BUILD.mdMarkdown
  1. Upload the file to ChatGPT, Claude, Cursor or any AI tool (or paste its contents).
  2. Describe the app you want in plain English.
  3. Let the AI ask you for the API key when it needs one.
View the file
Auto

Component · Form elements

Date input

View .md

Stable

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".

Specifications

Anatomy

The first day the tenant can move in.

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

Date input

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

Example

States

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

Usage

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

DoThe browser picker, labelled with what the date is for.
Don'tA text box with a US-format placeholder.

Do

  • Use the native date input.

Don't

  • Add a third-party date picker.

Implementation

HTML

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

Classes

ClassWhat it does
at-input with type="date"Native date input

Tokens used

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

Accessibility

  • The native input supports keyboard entry.

Related

Field: label, hint and error

Every form control sits in a field: label, optional hint, the control, and an error when it is wrong.

View component

Text input

A single line of text, with its label above.

View component