Label
Uses native fieldset and legend elements to group and describe both fields as a single form field.
By default, the months are displayed using the short month format. This can be customised by providing the monthNames prop, with a list of 12 items in the desired format.
Label
Years can be restriced to a range using the minYear and maxYear props.
By default, the years are presented in descending order, this can be reversed by specifying the ascendingYears prop.
Label
Supports all three levels of FieldLabel:
  • label — primary title of the field,
  • secondaryLabel — additional context, typically used to indicate optionality of a field,
  • tertiaryLabel — further context, typically used for providing assistance with a field.
Label (optional)  Help
A message is typically used to communicate the status of a field, such as an error message. This will be announced on focus of the field and can be combined with a tone to illustrate its purpose.
The supported tones are: "critical", "positive", and "neutral".
Label
Critical message
Label
Positive message
Label
Neutral message
Additional context can be provided with a description. This will display below the field label and also be announced by a screen reader when the field is focused.
Label
Extra information about the field
Mark the field as disabled by passing true to the disabled prop.
Label
The field prompts may be customised by providing a monthLabel and/or yearLabel and will be displayed to a user when no value is selected.
Label