Form example

Text input

Textarea input

Submit button

Use the correct input type for it's requirement

Form logic is key to a well working form. Using the right input type for the field helps prevent user error and makes the process of filling out a form more efficient.

Keep input labels short and concise

Not only is this beneficial to the user but also to whoever is collecting the data. Using the same UX principles throughout the Haio design system, only display as much information as needed.

Validation and required fields

When validating a form, always use the correct 'type' of input. This will ensure the data being sent is correct.

  • Mark fields with a required * at the end of the label
  • If every field in the form is required, then no asterisk is needed to highlight a required field.