Preventing incorrect characters vs. showing an error state

[ceyerkes]

Hi! Wondering if we have guidance around when to prevent a user from typing a character vs. allowing them to type a character, and showing them an error. For instance, a phone number input where the only allowable character is a number:

[kelseycavitt]

Hi @ceyerkes! 👋

We currently don’t have formal guidelines around this. We know our product owners are better equipped than us in handling validation for their product and customer needs.

Handling validation for something like phone numbers requires more business logic, understanding our users’ needs and how different countries handle phone numbers that the Phone Numbers team would be much better equipped to handle (as Sarah Li said in a discussion not too long ago). It could be helpful for you to collaborate with the designers on that team on best practices in handling phone numbers, and seeing if their team has plans to build a shared component for this use case.

I do have a few suggestions/considerations below:

• Usage of help text to help add more instructional context to the input
• Having the correct implementation of the input type when the engineers implement your design. Paste doesn’t allow typing only numbers in an input, please reference this useful article from UK.gov and our note in the Paste docs. You can also reference this GH discussion for more information.
• You could also use the placeholder text to provide a numeric example rather than "add recipient". It's not validation and it's also not necessarily consistent across browsers or assistive technology, but just another way to set expectations of valid input. However, placeholders shouldn't take the place of a label.
• In general as a team, we’ve gone back and forth on validation and where it lands, but most of the time it's somewhere in the Forms Layout guidelines and components. We do have some plans to deliver a Forms Layout feature in Q3, which would be components with sensible defaults used to quickly layout forms in a consistent manner.

Additionally, here are some related GH discussions to reference:
#2483: Phone Number Input
#695: Phone number input field format
#2502: Input type=number data validation

Please let us know if you reach out to the Numbers team and possibly would like to contribute some guidance around this to Paste!

[ceyerkes]

Thanks Kelsey, this is super helpful!