Skip to content

Conversation

@radmorecameron
Copy link
Contributor

@radmorecameron radmorecameron commented Nov 17, 2025

Summary

Inputmode can improve the UX on mobile devices.

For example, if an input is numeric but isn't supposed to be incremental then you shouldn't be using the type='number' input and type='text' should be used instead (see references below on why type='number' shouldn't always be used for numerical data).

Test instructions

Set inputmode on gcdsinput element and look at the virtual keyboard on th mobile device.

References

Why inputmode should be used

https://www.atomica11y.com/accessible-design/input-number/
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#using_number_inputs
https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/

inputmode

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inputMode

@daine
Copy link
Collaborator

daine commented Nov 18, 2025

Thanks for the PR @radmorecameron! This is great feature to add, so we'll bring this up to the team for review and get back to you soon.

daine
daine previously approved these changes Nov 27, 2025
Copy link
Collaborator

@daine daine left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@daine daine changed the title feat(input): Add support for inputmode feat(input): add inputmode HTML prop Nov 27, 2025
@daine
Copy link
Collaborator

daine commented Nov 27, 2025

@radmorecameron would you mind resolving the conflicts?

@radmorecameron
Copy link
Contributor Author

@radmorecameron would you mind resolving the conflicts?

Done 😃

@radmorecameron radmorecameron requested a review from daine November 27, 2025 19:22
@daine daine merged commit 442666b into cds-snc:main Nov 27, 2025
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants