On this page
Proposed CSC Standards · 0.1.0
Date pickers
A single date or a start and end date.
Collect a calendar date without an ambiguous text format.
What this describes
No date selected
No date selected
Start – End
Start date – End date
When to use
- The value is a date or a date span.
- The person should see the month context.
When not to use
- A free-text note. Use Input.
- A time of day. This component does not collect time.
Allowed variants
Single date
One appointment or deadline.
- Hierarchy
- One calendar.
- Use in
- Forms.
- Restriction
- Label required.
- Accessibility
- Day buttons are named.
- Responsive
- The calendar fits the column.
Date range
A start and end.
- Hierarchy
- Calendar plus a span summary.
- Use in
- Filters and leave periods.
- Restriction
- End is not before start without an error sentence.
- Accessibility
- The span is text.
- Responsive
- Stacks under the auto-fit breakpoint.
Mandatory rules
Label the field
DateField shows a visible label. A range also labels the span.
Implementation detail
WCAG 3.3.2. A calendar grid without a name is a set of unlabeled buttons.
Give the field a visible label. A range also shows the selected span in text.
Check: The field and the range summary have visible labels.
Make each day a button with a full date name
Day cells are buttons whose accessible names include the day, not only the numeral if numerals repeat across months.
Implementation detail
A grid of buttons labeled only “1” is ambiguous.
Keep the day buttons. Include the month in the name or in the grid’s label.
Check: The accessible name distinguishes the day from the same numeral in another month.
Stack the range on a narrow screen
The range variant is a two-column grid that becomes one column.
Implementation detail
Proposed CSC Standard. date-range already uses auto-fit. Do not force two columns at 320px.
Use variant="range" and keep the date-range layout.
Check: At 375px the calendar and the span summary stack.
Restrictions
No conditional or prohibited rules are published for this component.
Accessibility
- Visible label.
- Day buttons have unambiguous names.
- A reversed range shows text.
Responsive behavior
- The calendar must not widen the page.
- Range stacks to one column.
Component states
Empty
No date selected. The label remains.
No date selected
Selected
The chosen day is indicated by more than color.
No date selected
Correct implementation
The date field has a visible label and an 12px radius.
Imports: None. Dependencies: None. Rules: DAT-001.
export function Appointment() {
return (
<label style={{ display: 'grid', gap: 7 }}>
Appointment date
<input type="date" style={{ border: '1px solid #E7EBF2', borderRadius: 12, minHeight: 40, padding: 12 }} />
</label>
);
}Incorrect implementation
No incorrect example is published for this component.
Common mistakes
- An unlabeled calendar.
- Day buttons that only say the numeral with no month context.
- A two-column range at 320px.
Testing checklist
Agent prompts for this component are in the AI Development Hub.