Skip to main content

Form Field Types


Introduction

A variety of field types are available when building form questions.

The functions of each field are detailed here.

 

Field Types

Checkbox Group

Used to allow the user to choose one or more options from the options listed.

1.png

  • Enable “Other”: Allow the user to input an option that isn’t provided as an option here.

  • Options: The list of options for the user to choose from. options can be added by clicking on the Add Option button.

    • Options can be pre-selected for the user by checking the corresponding box.


2.png

3.png


 

Date Field

Used to get a date from the user.

4.png

  • Type: the type of date field

  • Min: the minimum allowed date

  • Max: the maximum allowed date

  • Step: date steps

When the user clicks on the date field, they get a calendar date picker.

5.png


 

Header

Used to set a header or subheader for the form.

This is a field used to display information to the user, and is not editable by them.

6.png

  • Label: Header text

  • Type: Header size (H1 is the largest)

7.png


 

Number

Used to input only numerical digits.

8.png

  • Type: The type of number field.

  • Min: The minimum allowed number.

  • Max: The maximum allowed number.

  • Step: The amount the user can increment/decrement by clicking on the up and down arrows without entering the number using a keyboard.

9.png


 

Paragraph

Used to set a paragraph of text.

This is a field used to display information to the user, and is not editable by them.

10.png

  • Content: The paragraph text or content.

12.png


 

Radio Group

Used to allow the user to choose one option from the options listed

13.png

  • Options: The list of options for the user to choose from. options can be added by clicking on the Add Option button.

    • Options can be pre-selected for the user by checking the corresponding radio button.

15.png

17.png

 

Select Menu

Presents a drop-down list the user can select an option from.

This is similar in function to radio-groups and checkbox groups, ideally used when there are many options to choose from to save screen space.

19.png

  • Allow Multiple Selections: To allow the user to select more than one option (similar functionality to a checkbox group).

  • Options: The list of options for the user to choose from. options can be added by clicking on the Add Option button.

    • Note: options can be pre-selected for the user by checking the corresponding radio button

222.png

 

Text Field

Used to allow the user to input text.

20.png

  • Type: Select what type of input is needed:

    • Text Field: is used for regular text.

    • Password: is used for sensitive information.

    • Email: is used to only accept email addresses.

    • Tel: is used to only accept phone number, will display a number pad keyboard instead of the regular keyboard.

  • Max Length: maximum number of characters allowed.

21.png

 

 

Text Area

Similar to a text field, but allows for a larger area to enter text.

22.png
  • Max Length: The maximum number of characters allowed.

  • Rows: How many rows/lines does the text area initially takes up.

24.png


Â