Calendar

Visual calendar for date selection.

Props

max
string
The maximum selectable date in YYYY-MM-DD format. Defaults to 5 years in the future.
min
string
The minimum selectable date in YYYY-MM-DD format. Defaults to 5 years in the past.
name
string
Name identifier for the calendar, included in change events.
testId
string
Sets a data-testid attribute for automated testing.
value
string
The currently selected date value in YYYY-MM-DD format.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
max
Date | string | undefined
The maximum selectable date in YYYY-MM-DD format. Defaults to 5 years in the future.
min
Date | string | undefined
The minimum selectable date in YYYY-MM-DD format. Defaults to 5 years in the past.
name
string
Name identifier for the calendar, included in change events.
testId
string
Sets the data-testid attribute for automated testing.
value
Date | string
The currently selected date value in YYYY-MM-DD format.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
bordered
boolean
Shows a border around the calendar. Set to false when embedding within another component.
Defaults to true.
max
string
The maximum selectable date in YYYY-MM-DD format. Defaults to 5 years in the future.
min
string
The minimum selectable date in YYYY-MM-DD format. Defaults to 5 years in the past.
name
string
Name identifier for the calendar, included in change events.
testId
string
Sets a data-testid attribute for automated testing.
value
string
The currently selected date value in YYYY-MM-DD format.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.

Events

onChange
(details: GoabCalendarOnChangeDetail) => void
Callback fired when the selected date changes.
onChange
GoabCalendarOnChangeDetail
Emits when the selected date changes. Emits the selected date details as GoabCalendarOnChangeDetail.
_change
CustomEvent
Examples
Examples show common usage patterns and implementation guidance.

No usage guidelines have been documented for this component yet.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.

Related components

Date picker

Lets users select a date through a calendar without the need to manually type it in a field.
View old component docs