This pattern is used for accurately capturing name information. Catering for the needs of a diverse society means that this pattern needs to be flexible and inclusive.
Full name
Base pattern
This pattern is kept as simple as possible yet captures more data points than Simple name (see below) should business requirements call for more details. The labels Given name and Family name are used, as First name and Last name do not translate consistently across cultures.
Why not one field? Arguments for inclusivity and user control may suggest just one field for name capture, however this poses some issues when it comes to parsing a name for a database (e.g Peter van den Elshout). More often than not these databases need to speak to external agencies which ask for specific data points for such tasks as ID verification for example, as well as aligning with other business criteria.
Title: Only ask for a title if absolutely necessary. Gender, and how we identify ourselves is a personal topic so reasons for capture need to be clear.
Example usage
This example shows the base pattern used with additional questions when further details are required; Any other name.
Simple name
Sometimes we do not require user to provide full details, for example if they are only submitting en enquiry, this pattern is useful in these instances.
Error states
The error message should always sit above the input field to give context. The error icon helps draw the eye by disrupting the flow of text at the starting point of the sentence, and aids in accessibility for those who may be colour impaired and not see the colour change.