Canonical inventory
Forms · core
Date pill
field.date-pillDate pill: An input control that gathers, changes, or validates a value.
date pillthe place you enter a valuethe input control
States8
Touch target44px
Evidence6
Introduced by1 kits
Visual specimen
Same contract. Every kit voice.
Translation table
What code calls it.
Web<input type=date>The closest native or standardized web primitive.direct
ARIAtextbox or input roleNo single ARIA role represents the complete component.pattern
SwiftUIDatePickerThe nearest named SwiftUI API.direct
AppKitNSDatePickerThe nearest named AppKit API.direct
Anatomy
Every part, named.
- 1Label
- 2Input surface
- 3Current value or placeholder
- 4Supporting or error text
- 5Focus and validation treatment
Often confused with
Similar shape. Different contract.
Text field
field.textShares a visual family, but has a different role, state model, or interaction contract.
Textareafield.textareaShares a visual family, but has a different role, state model, or interaction contract.
Search fieldfield.searchShares a visual family, but has a different role, state model, or interaction contract.
Prompt · paste into your agent
Ask for the exact thing.
Implement the canonical Date pill component (field.date-pill). Date pill: An input control that gathers, changes, or validates a value. Support these states: default, hover, focus-visible, active, disabled, filled, error, loading. Use semantic design tokens rather than raw visual values. Preserve a minimum 44px touch target where interactive. Provide and verify: implementation, state-matrix, responsive, keyboard, touch, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.Studio contract
What must be proven.
Required states
default · hover · focus-visible · active · disabled · filled · error · loading
Required evidence
implementation · state-matrix · responsive · keyboard · touch · reduced-motion
Source union
purple-rain