There are many types of form elements, including text fields, checkboxes, radio buttons, single-selects, date pickers, toggles and buttons.
1 – Labels: Standard label alignment is left-aligned with the field on the right. For the placeholder text, use sentence case and left-align.
2 – Placeholder text: Display a placeholder text to help communicate purpose.
3 – Disabled fields: Show disabled fields to indicate that the field is non-editable.
4 – Field Validation: Error message alignment is left-aligned and display below the field. Highlight the field so the users aware which fields have entered an invalid value.
The length of the field should reflect the intended length of content. Available lengths are 250px, 350px, and 680px.
Layout
1 – Page title: Use bigger font style to display page title.
2 – Buttons: The primary button should be right-aligned along with the right side of the form field. If additional actions are required, put the primary button first, then any standard buttons, then the link button.
3 – Section header: A section header is the title of a particular section of your form. Try to make the section header concise and informative, but, if you need to, you can add a short paragraph of text to explain the section.
Buttons are sorted by importance from right to left, with the most important button (primary) on the right.
Design Guidelines 