Over here, you can easily find common patterns to start building your site.
We provide baseline patterns that you can easily tweak to suit your products and services.
To bring you greater convenience, these patterns also have basic accessibility features built-in, e.g. autocomplete attributes for form fields.
For more information on WCAG standards , you can visit the WCAG page.
Address
Use this pattern when you require users to key in their Singapore-based address.
Note: Give your users the option to either key in their postal code to look up their address, or enter their full address manually.
Guidelines
For your Address Lookup
Make it clear to users that this will only work with Singapore addresses.
Use the address lookup only if you are asking for a Singapore address. Otherwise, use multiple text inputs or a text area when asking for addresses outside of Singapore.
For Manually-entered Addresses
The fields should always have the autocomplete attribute to help your users complete it quickly.
You will need to include the autocomplete attribute to meet WCAG 2.1 AA for production.
Date Input
Use this pattern when you want to ask users for a specific date, e.g their date of birth or when something was issued to them.
Note: If you need users to select from a few specific dates, we recommend that you use the radio button component to allow them to choose easily.
Usage
Below you will find a General Date Format you can use, along with the code needed to build this element.
DD MM YYYY
MM YYYY
Guidelines
When you require users to fill in dates for your services
State clearly how the data should be filled (e.g. Day Month Year)
Give an example of how the date should be filled in (e.g. 01 01 2020 vs 1 1 2020)
When you request users to fill in memorable dates
For example, asking for Date-Of-Birth means you should always have the autocomplete attribute for these 3 fields, bday-day, bday-month and bday-year to bring convenience to users.
You will need to include the autocomplete attribute to meet WCAG 2.1 AA for production.
Email address input
Use this pattern when you need to ask users for their email address.
Note: State clearly what their email address will be used for.
Usage
Below you will find a General Email Address you can use, along with the code needed to build this element.
Guidelines
Explain the rationale of requesting for users’ email address
This allows users to:
Feel assured that their email address will not be misappropriated
Choose which email address they prefer to use
Make sure it works for all users
Your field text should accommodate the maximum length of email addresses (256 characters long, including punctuation)
Guide users to enter their email address
Make it easier for users by:
Allowing them to copy and paste their email address
Setting the type attribute to email so that the correct keyboard is displayed
Setting the spellcheck attribute to false so that their email addresses are not spell checked by the browser or device
Setting the autocomplete attribute so that browsers can fill in their email address if they have entered it previously
You will need to include the autocomplete attribute to meet WCAG 2.1 AA for production.
Collecting Names
Use this pattern when you need to ask users for their names.
Types
General name field
You should follow this pattern when you need to ask for a user’s name. You should only ask for names if you need it for a service.
<div class="form-group required">
<label class="col-form-label">Full Name</label>
<input class="form-control">
<small class="form-text text-muted">Enter full name as per ID document</small>
</div>
