A form is a group of related inputs (fields) that allows users to provide data or configure options. In some cases the form is already combined in components such as text Input field and Select field.
General guidelines
Common form components include Inputs, Checkbox, Radio, Selects, datepickers, and Buttons.
<div class="pforms"
    <div class="title">
        <h1>Title</h1>
    </div>
    <div class="form-field vertical">
        Select or Inputs code here
    </div>
    <div class="form-field vertical double">
        Double select code here
    </div>
    <div class="form-field">
    Checkbox or Radio code here
    </div>
    <div class="form-field horizontal">
        Buttons code here
    </div>
</div>
Title
Describes the form. If the form is the main element of a page, use an h2 tag; otherwise, use h3 and adjust the rest of the page hierarchy accordingly. Follow the title with a brief description.
Buttons
Use a main button for the main action and a secondary button to cancel. Buttons should be aligned to the left.
General guidelines
  • Always use clear and concise labels.

  • Be explicit about the results that will follow if the checkbox is selected.

  • Place the labels to the right of the checkbox entries.
Structure
1
Group Label: Can be optional. Indicates what should be selected next.
2
Checkbox: Indicates the status of the checkbox. By default it is not selected.
3
Label: Information you want to select or deselect.
Align
Checkbox labels are placed to the right of your entries. If there is a grouping, they can be distributed vertically or horizontally depending on the use case and the structure of the user interface.
DO
  • To present multiple options that can be selected each.
  • For changes that require confirmation after selection.
DON'T
  • When only one of multiple options can be selected, use radio buttons.
  • When you need to group several options into a single basic option: follow the parameters of group labels.
  • When you need to apply unique on/off settings with instant response, use a switch.