Date component uses textfield input fields instead of number fields

[andrew-wallis]

The Date component uses textfield inputs rather than numbers, which allows users to key in letters. This could be confusing if the user tries to key in e.g "Sep" in the month field. The original BHCC component uses number fields.

[richardaclarke]

The date component on Passport application form uses a variety of html5 attributes to control input to the date fields, although it is still a text field. Could we use a similar approach?

<
input 
class="govuk-input govuk-date-input__input govuk-input--width-4" 
id="date-of-birth-year" 
name="date-of-birth-year" 
type="text" 
pattern="[0-9]*" 
inputmode="numeric" 
maxlength="4" 
autocomplete="bday-year"
>

https://www.passport.service.gov.uk/filter/age

[MattOz-CDS]

@andrew-wallis The answer may be obvious but why were text input fields used instead of number input fields ?

[andybroomfield]

See also GDS on why they changed from number to text.
Also details on how to force numeric input (use pattern attribute).
The main issue is the number field input browser also add increment / decrement selectors.

[richardaclarke]

Interesting post. There are certainly many compelling reasons to keep it as text but control the input with the methods in the GDS date component https://design-system.service.gov.uk/components/date-input/

[andrew-wallis]

Hi,

@MattOz-CDS - it is because the datelist component that this is built upon offers text input or select as the two field element options, number isn't available from the base class.

@richardaclarke - interesting research thanks for sharing. It looks like the GDS "pattern" attribute allows any combinations of characters to be entered, but then will validate on submission. I don't know how this would interact with Drupal's native validation.

I'm not sure what is preferrable:

• Input field with "pattern" attribute: The user is allowed to enter any character but is then given a validation message on submission (so 'October') could be typed in full.
• Number field (with arrows hidden): The user is only allowed to enter numerical characters, with no immediate feedback.

I imagine it would be the latter but perhaps with some immediate feedback if anything except a numerical character is entered.

[richardaclarke]

You're right about the validation. If I try the GDS code in W3schools https://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml5_input_pattern I get a front-end validation warning:

But the passport page doens't do that, there are nicer warnings. You couldn't type 'October' thought because the maxlength="2" attribute stops you typing more than 2 characters in the month box. So it seems like pattern is checked on submission, but maxlength is enforced when filling the field.

Given the GDS research cited in @andybroomfield's link above, I think we should follow the GDS model, keep as text fields and use similar (or identical!) controls.

[andrew-wallis]

I missed @andybroomfield 's link. That's interesting - let's stick with input fields with the additional attributes. I wonder why GDS have left the maxlength attribute off their code examples? It seems like it would be a necessary to stop the user from entering superfluous information.

[keelanfh]

Closed by #16