Forms

Forms provide patterns for creating HTML forms that are easy to use and accessible for as many as possible.

TODO:

  • work on guidelines for microcopy
  • work on colour system
  • think about form actions and buttons
  • refactor fieldset when a typography system is in place

Field is the bread and butter of a form, so it is important to get right. It Must have a label to prompt the field to be filled in. It can have a hint too, when the label needs more explanation. It may have a placeholder but it isn't advised, an empty-box is more enticing to fill in.

A field should be <label> element with class="field"> and the input element nested inside of it. If you can't use a label, fields must have a unique id and the label that points to it using the for attribute.

A range input can have a .rangeHints inside the label and any inline elements inside are evenly spread horizontally to describe the range.

TODO:

Work

Checkbox give users a binary option, yes or no, agree or disagree. You can also group them together into a CheckboxGroup

Pick your days

FormMessage is for displaying good/bad/information text to users, usually in response to a form submission.

The style is bare by default so it can more easily be overridden. Note the use of data-accent=X.

🚧 This is under review

FieldSet should be used to group related fields together. Like a section of a form or a component of a larger entity. It should have a legend as the first child to label the group. It can also have a .fieldset-hint to provide a description of the grouping that is in play.

Similar to form, FieldSet makes sure all child elements are evenly spaced, just like a StackLayout.

Edit profile

This is a helpful bit of text