Forms

Forms elements are a central part of data entry in our interfaces.

Short text field

30px high and labels are 12px.

Example

Long text field

As represented in the right corner of the box is expandable to aid in reading larger sections of content. The default height is 214px or ten rows of content shown.

Example

Large text field

40px high, this is only used for special case single inputs which have prominence for a page such as the copy/copied pattern for numbers/urls. If using a mix of input styles on a form, then use the standard 'Short text field' style.

Example

Disabled field label

To prevent user interactions.

Example

Parent & child fields

Selecting the parent field allows the user to view, edit or add to the information related to the parent field. When selecting an option from the parent field, the label will turn bold while the child fields appear below to help users acknowledge the original parent field. The information within the parent and child fields should be grouped using horizontal lines above and below the content. An exception to using the horizontal lines is when the parent and child fields directly relate to the content above, which may sometimes happen on tax forms.

Example


Dropdowns

The pre-fill text should be as specific as possible to indicate the type of content in the list.

Example

Checkboxes

Checkbox: The first scenario indicates the user agrees with a statement. The second scenario actions a bulk action feature in a list. The third is when the checkbox is disabled. There is also the scenario where the disabled checkbox is checked. An indeterminate state exists when the checkbox is neither checked or unchecked and is often used in tables and slats where bulk actions are offered.

Example

Radio buttons

Radio: A radio button allows the user to choose only one of a predefined set of options. A radio may be disabled as well as being selected yet disabled.

Example

Custom checkboxes and radio buttons

Custom radio buttons and checkboxes: http://forsigner.com/magic-check/

Modifications:

  • Unit changed to EM so custom radio/check will scale with font-size.
  • Colours and spacing from label text.
  • Animations for checked: scale for checkbox and opacity for radio.

Example