Forms

Whether it’s part of a larger task or a one-off entry, completing the form accurately should be quick and easy. Layout and content are key to building that experience.

This page will contain all form related components such as checkboxes, input fields, dropdowns and more...

Text Field

  1. Title: We recommend you use a title for any form so the user has intent.
  2. Text Field: Text field so the user can enter in quick information.
  3. Required Field: If fields are required to enter before submitting use the required field option.
  4. Dropdown: Dropdowns to give the user a list of options.
  5. Buttons: Buttons to submit or cancel out of the window.

Form components

Text field

Text fields require a label to clarify what type of information is required from the user. There should be placeholder text within the text field with clear instructions for the user to type information. This field should have a character limit to what the user can write.

Text Field

See the text fields page to learn more about the behavior of text fields.


Text area

Text area require a label to clarify what type of information is required from the user. There should be placeholder text within the text area with clear instructions for the user to type information. Text areas are used when the user is required to enter bulk text.

Text area

See the text area section to learn more about the behaviors of text area fields.


Buttons

Form buttons allow the user to submit the filled-in form to the server for processing. Your form will generally contain at least one form submit button so that the form can be sent.

Form Button

See the buttons page to learn more about the behaviors of buttons.


Checkboxes

Using checkboxes is a good option when you want to give your users the option to choose several items from a group of choices.

Form Checkbox

See the checkboxes page to learn more about how to use checkboxes.


Radio

Using radio selection is a good option when you want to give your users the option to select one item from a group of choices.

Form Radio

See the radio select page to learn more about how to use radio selection.


Dropdown

Using radio selection is a good option when you want to give your users the option to select one item from a group of choices.

Form Radio

See the dropdown page to learn more about the behaviors of dropdown components.