Date input Nunjucks macro options

Use options to customise the appearance, content and behaviour of this component when using a macro, for example, changing the text.

Also see the guidance on the Date input component page, which shows these options in use within each example.

Some options are required for the macro to work; these are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string Required. This is used for the main component and to compose the ID attribute for each item.
namePrefix string Optional prefix. This is used to prefix each item name, separated by -.
items array The inputs within the date input component. See macro options for items.
hint object Can be used to add a hint to a date input component. See macro options for hint.
errorMessage object Can be used to add an error message to the date input component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. See macro options for errorMessage.
formGroup object Additional options for the form group containing the date input component. See macro options for formGroup.
fieldset object Can be used to add a fieldset to the date input component. See macro options for fieldset.
day object Options for the day input within the date input component. See items.
month object Options for the month input within the date input component. See items.
year object Options for the year input within the date input component. See items.
values object Specify value attributes for the date parts without setting items. You can also use the name for the fields as keys, including any namePrefix. See macro options for values.
classes string Classes to add to the date-input container.
attributes object HTML attributes (for example data attributes) to add to the date-input container.
Options for items array objects
Name Type Description
id string Item-specific ID. If provided, it will be used instead of the generated ID.
name string Required. Item-specific name attribute.
label string Item-specific label text. If provided, this will be used instead of name for item label text.
value string If provided, it will be used as the initial value of the input.
error boolean If set to true, it will show a red error border on the item input. If provided, you must set the top-level errorMessage option to add an error message to the date input component.
autocomplete string Attribute to meet WCAG success criterion 1.3.5: Identify input purpose, for instance "bday-day". See the Autofill section in the HTML standard section in the HTML standard for full list of attributes that can be used.
pattern string Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
classes string Classes to add to date input item.
attributes object HTML attributes (for example data attributes) to add to the date input tag.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInputs object Content to add before the inputs used by the date input component. See macro options for formGroup beforeInputs.
afterInputs object Content to add after the inputs used by the date input component. See macro options for formGroup afterInputs.
Options for formGroup beforeInputs object
Name Type Description
text string Required. Text to add before the inputs. If html is provided, the text option will be ignored.
html string Required. HTML to add before the inputs. If html is provided, the text option will be ignored.
Options for formGroup afterInputs object
Name Type Description
text string Required. Text to add after the inputs. If html is provided, the text option will be ignored.
html string Required. HTML to add after the inputs. If html is provided, the text option will be ignored.
Options for values object
Name Type Description
day string The value attribute for the day input.
month string The value attribute for the month input.
year string The value attribute for the year input.
Options for hint component
Name Type Description
text string Required. If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored.
id string Optional ID attribute to add to the hint span tag.
classes string Classes to add to the hint span tag.
attributes object HTML attributes (for example data attributes) to add to the hint span tag.