Get started

Get the tools and building blocks to design and develop consistent and accessible experiences.

Start developing Start designing

Form input components

Guidelines and standards for common form inputs.

Guidance

These standards for common form inputs to enable us to provide a more consistent, seamless experience across Government of New Brunswick programs and services.

Our forms are a primary touchpoint between people and government. Inconsistent forms require users to relearn how things work with each new task, increasing the failure rate and creating unnecessary barriers to access.

Search form input components

Account or file number

How to ask users for an account or file number.

Address

How to ask users for their address.

Checkbox

Allows users to select one or more options.

Confirm information

Show users a summary of their information before they submit.

Create account form

How to structure a form for creating an account.

Date

How to ask for dates.

Driver’s licence number

How to ask users for their driver’s licence number.

Email address

How to ask users for an email address.

Form container

Form containers can improve the layout of your application or service.

Form sections

Use accordions to organize forms into sections.

International phone number

How to request an international phone number

Library card number

How to ask for a library card number.

License plate

How to ask for a vehicle's license plate number.

Medicare number

How to ask users for their Medicare number.

Opt-in consent checkbox

How to ask users for consent.

Outdoors card number

How to ask users for their Outdoors Card number.

Phone number

How to ask users for their phone number.

Postal code

How to ask for a postal code.

Predictive list

How to make an autocomplete field to show suggestions based on user input.

Preferred language

Allows user to select preferred language.

Property Account Number (PAN)

How to ask for a Property Account Number (PAN).

Radio buttons

How to use radio buttons to give users mutually exclusive choices.

Required field

How to indicate a required field.

Search

Help users quickly find what they are looking for.

Select lists

How to use a dropdown menu to let users select one option from a list.

Sign in form

How to build a form for signing in.

Star rating

How to implement a star rating component.

Text area

How to use a text area for multiline user input.

Text input

Create a basic text input field.

Vehicle Identification Number

How to ask users for Vehicle Identification Number.