MonthPicker — Braid Design System

Label

Accessibility

Uses native fieldset and legend elements to group and describe both fields as a single form field.

Changing the months

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

Open in Playroom

Changing the years

Years can be restricted 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

Open in Playroom

Additional labels

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

Open in Playroom

Message and tone

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", "caution", and "neutral".

Label

Critical message

Label

Positive message

Label

Caution message

Label

Neutral message

Open in Playroom

Field description

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

Open in Playroom

Disabled field

Mark the field as disabled by passing true to the disabled prop.

Label

Open in Playroom

Placeholder prompts

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.

The placeholder text is also used as the aria-label for each field within the fieldset.

Label

Open in Playroom

Indirect or hidden field labels

In some cases it may be necessary for a field to be labelled by another element or even not to have a visual label. Instead of providing a label either aria-label or aria-labelledby can be provided.

Custom field label

The label for this field is the Heading element before it.

The label for this field is hidden.

Open in Playroom