Forms

Forms are used to capture data from users.

Forms comprise of the form itself and multiple form inputs.

Each form is broken down into one or more fieldsets that groups the form elements into logical chunks that make sense to the user, such as delivery address. 

Form elements are split into two key types: freeform entry and selections.

Freeform inputs

Textfield

Textfields are used to input a small (single line) amount of freeform text.

<div class="nsw-container nsw-wysiwyg-content">
    <div class="nsw-forms">
        <div class="nsw-form-group">
          <label for="{uniquieID}" class="nsw-form-label">NSW plate or billing number</label>
          <input id="{uniquieID}" name="{uniquieName}" class="nsw-form-input">
        </div>
    </div>
</div>

// the uniquieID is needed to programmatically associate the label to the relevant form input
// each input should be associated with a unique name

 

Copy

Textarea

Textareas are used to input multiple lines of text, for example a comments field.

<div class="nsw-container nsw-wysiwyg-content">
    <div class="nsw-forms">
        <div class="nsw-form-group">
          <label for="{uniquieID}" class="nsw-form-label">Multi-line text input:</label>
          <textarea class="nsw-form-input" name="{inputName}" id="{uniquieID}"></textarea>
        </div>
    </div>
</div>

// the uniquieID is needed to programmatically associate the label to the relevant form input
// each input should be associated with a unique name

 

Copy

Selection inputs

Selections inputs are used to select an option from a predefined list of available options. Selection options may be single-select or multi-select.

Dropdown

The dropdown pattern, also referred to as a drop list or select list, allows users to select a single option from a list of available options.

    <div class="nsw-forms">
        <div class="nsw-form-group">
          <label for="{uniquieID}" class="nsw-form-label">Dropdown:</label>
          <select id="{uniquieID}" class="nsw-form-select">
        <option value="">Please select</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
        </div>
    </div>

// the uniquieID is needed to programmatically associate the label to the relevant form input
// each input should be associated with a unique name

 

Copy

Single checkbox

Single checkboxes, sometimes referred to as tickboxes, are used to confirm a user's selection or preference. Often used to confirm a user agrees to a product's terms and conditions.

    <div class="nsw-forms">
        <div class="nsw-form-group">
            <div class="nsw-form-checkbox">
               <input class="nsw-form-checkbox__input" type="checkbox" name="{inputName}" id="{uniquieID}">
               <label class="nsw-form-checkbox__label" for="{uniquieID}">Single checkbox:</label>     
            </div>
        </div>
    </div>

// the uniquieID is needed to programmatically associate the label to the relevant form input
// each input should be associated with a unique name

 

Copy

Checkbox list

Checkbox lists provide the user with a list of available items to choose from. The number of items a user can select should be indicated to the user on the page.

Checkbox lists are wrapped in a fieldset to make them one logical group.

    <div class="nsw-forms">
        <div class="nsw-form-group">
            <fieldset class="nsw-form-fieldset">
            <legend>
            <span class="nsw-form-legend-text">Multiple Checkbox</span>
            </legend>
            <div class="nsw-form-checkbox">
               <input class="nsw-form-checkbox__input" type="checkbox" name="{inputName}" id="{uniquieID}">
               <label class="nsw-form-checkbox__label" for="{uniquieID}">Checkbox Option 1</label>
               <input class="nsw-form-checkbox__input" type="checkbox" name="defaultcheck" id="{uniquieID}" aria-describedby="checkbox2a-error-text">
               <label class="nsw-form-checkbox__label" for="{uniquieID}">Checkbox Option 2</label>      
            </div>
            </fieldset>
        </div>
    </div>

// the uniquieID is needed to programmatically associate the label to the relevant form input
// each input should be associated with a unique name

 

Copy

Radio list

Radio lists provide the user with a list of available items from which a single selection is made.

Radio lists are wrapped in a fieldset to make them one logical group.

    <div class="nsw-forms">
        <div class="nsw-form-group">
            <fieldset class="nsw-form-fieldset">
            <legend>
            <span class="nsw-form-legend-text">Multiple Radio</span>
            </legend>
            <div class="nsw-form-radio">
               <input class="nsw-form-radio__input" type="radio" name="{inputName}" id="{uniquieID}">
               <label class="nsw-form-radio__label" for="{uniquieID}">Radio Option 1</label>      
               <input class="nsw-form-radio__input" type="radio" name="{inputName}" id="{uniquieID}">
              <label class="nsw-form-radio__label" for="{uniquieID}">Radio Option 2</label>       
            </div>
           </fieldset>
        </div>
    </div>

// the uniquieID is needed to programmatically associate the label to the relevant form input
// each input should be associated with a unique name

 

Copy

Helper text

Helper text allows form designers to provide users with help to fill in a form element.

<div class="nsw-forms">
    <div class="nsw-form-group">
      <label for="{uniquieID}" class="nsw-form-label">Single-line text input field:</label>
      <span id="{helperID}" class="nsw-form-helper">This is helper text</span>
      <input id="{uniquieID}" name="{inputName}" class="nsw-form-input" aria-describedby="{helperID}">
  </div>
</div>

// the uniquieID is needed to programmatically associate the label to the relevant form input
// each input should be associated with a unique name
// the helperID is needed to programmatically associate the help text to the relevant form input

 

Copy

Validation

Validation is used to let the user know when there is an issue with the data they have input.

<div class="nsw-forms">
   <div class="nsw-forms">
    <div class="nsw-form-group">
      <label for="{uniquieID}" class="nsw-form-label">Single-line text input field:</label> 
      <span id="{helperID}" class="nsw-form-helper">This is helper text</span>
      <input id="{uniquieID}" name="{inputName}" class="nsw-form-input" aria-describedby="{helperID} {errorID}" aria-invalid="true">
      <span id="{errorID}" class="nsw-form-helper nsw-form-helper--error">There was an error with the input above</span>
    </div>
    </div>
</div>

// the uniquieID is needed to programmatically associate the label to the relevant form input
// each input should be associated with a unique name
// the helperID is needed to programmatically associate the help text to the relevant form input
// the errorID is needed to programmatically associate the error text to the relevant form input
// if using both errorID and helperID, please make sure you separate them by a space, as in the example above

 

Copy

Form elements are designed with clear concise labels so the user knows what they are required to input. The labels are placed above the element and in close proximity, so users see the label and input as one entity.

Help text is added where further instructions or clarifications will help the user complete the form.

Validation is used to clearly show the user if the input does not meet the required rules.

 

Freeform

Use text fields and text areas for freeform entry. Use textfields for short single line entry and text areas for longer entries.

 

Selection inputs

Use a radio button list or dropdowns for single selections and checkboxes for multi-selections.

Dropdowns hide available options and have known usability issues. Make sure you test the use of dropdowns if you use them. 

Radio button lists show all available options, but take up valuable screen real estate. Use radio button list vertically only.

Individual checkboxes are used for agreeing to terms and conditions or registering for an option.

Checkbox lists are used where multiple selections are permitted.

 

Help text

Use help text to provide additional context, information or as an example to complete a field input.

Do not use infield placeholder text.

 

Validation

The validation that you input needs to clearly explain to the user what the issue is and what they need to do to address the error.