A UI glossary for agents to build anything

A full catalog of components for agents to read and reference when building interfaces. Specs, code examples, defined behavior, theming, and design tokens.

Components / Inputs Date Picker

ATOMIC TYPEMolecule

PLATFORMS

WebNative

UPDATEDSep 19, 2026

VERSIONv3.4

Default

Start date

Pick a date▦

Filled

Start date

Oct 17, 2026▦

Error

Start date

Feb 30, 2026▦

Choose a real date.

PROPTYPEDEFAULTDESCRIPTION

valueDate | nullnullSelected date. Controlled.

onChange(d: Date) => void—Called when a day is picked.

minDateDate—Earliest selectable day.

errorstring—Replaces help text and sets aria-invalid.

Components / Inputs / Date Picker Spec

Spec Code elements://components/date-picker/spec

Summary

–Text input paired with a calendar popup for choosing a single date. Use it when the user may type a known date or browse for one. For two dates, use Date Range Picker.

Anatomy

–Label above the field, always visible

–Input with a trailing calendar button (24px hit area inside a 36px field)

–Help text below: format hint or constraint

–Popover with month header, prev/next buttons and a 7-column day grid

–Footer with Today and Clear actions (optional)

States

–Default: placeholder shows the expected format

–Focus: 1px fg border plus 3px ring

–Open: popover anchored below, flips above near the viewport edge

–Filled: formatted date, clear button on hover

–Error: err border, message replaces help text, aria-invalid set

–Disabled: raised fill, not focusable, popover cannot open

Behavior

–Typing a valid date updates the calendar month and selection

–Invalid input is kept as typed and flagged on blur, never auto-corrected

–Dates outside minDate / maxDate are visible but not selectable

–Selecting a day closes the popover and returns focus to the input

–Escape closes the popover without changing the value

Keyboard

–Alt + ↓ or Enter on the button opens the calendar

–Arrow keys move by day, Page Up / Down by month, Shift + Page by year

–Home / End jump to the start or end of the week

–Enter or Space selects the focused day

Accessibility

–Label bound with for / id; help and error linked with aria-describedby

–Calendar is a dialog with role grid; each cell announces the full date

–Today and the selected day are marked with aria-current and aria-selected

–Focus is trapped in the popover while open

Content

–Label names the date: "Start date", not "Date"

–Show the format in help text in the user's locale

–Error copy says how to fix it: "Choose a date after Oct 17"

Tokens

–color.border.default, color.fg (focus), color.status.err

–radius.input, radius.popover

–space.2 inside the field, space.3 between label and input

Hundreds of components. From Button to Tour, each classified as an atom, molecule or organism and grouped by what it does.

Web and Native. One spec per component, with React and Native code that share the same props and tokens.

A complete structure. Anatomy, states, behavior, accessibility and content rules are written down before any code is.

Stop the guessing game
Build from a library of references

A shared language for you and your agents. Find exactly what you want and build what's needed the first time.

Complete behavior, spec, and code examples›
Code, state, and logic defined›
Extendable with theming, design tokens, props›

⌕ date 3 results

Date PickerInput + calendar popup for a single date.

inputs · mol

Date Range PickerStart and end dates; two calendars or dual month.

inputs · mol

CalendarMonth grid for date selection. Compose with date-picker.

inputs · atom

date-picker.html

One spec,
any platform.

Each component page pairs the written spec with working React and Native code. Copy either as Markdown or source.

Spec: anatomy, states, behavior, a11y, content›
Web and Native code›
Copy spec from Markdown or access over MCP›

Tokens, not one-off styles
so every surface stays consistent.

Every visual value is a named token. Change a token and every component that reads it updates, in light and dark.

Props table per component›
Named color, radius and space tokens›
Light and dark mode›

Every component right in your tools

Connect any MCP client and give your agent everything they need to build out interfaces consistently

claude — elements mcp

~/product main · elements connected

❯

agent:mira elements://components/date-picker

SPEC CHECK

Anatomy · 4 rulespass

Accessibility · 5 rules1 fail

Content · 4 rules1 warn

Rules passed11 / 13

Have a code? Got a code from an event or a partner? Enter it here to add credits.

A UI glossary for agents to build anything

Stop the guessing gameBuild from a library of references

One spec,any platform.

Tokens, not one-off stylesso every surface stays consistent.

Every component right in your tools

Stop the guessing game
Build from a library of references

One spec,
any platform.

Tokens, not one-off styles
so every surface stays consistent.