Solaris Design System

Forms

Forms are a group of inputs and buttons inside a <form> tag.

The requirement of the tag allows for accessibility usage where users can tab and enter throughout the form to complete it.

Type Emotive
Title bottom margin: 48px
Input-margin: 36px
Margin with label: 16px		 Productive
Title bottom margin: 48px
Input-margin: 32px
Margin with label: 14px
Two button form Forms two buttons emotive theme light Forms two buttons emotive theme dark Forms two buttons productive theme light Forms two buttons productive theme dark
Single button form Forms single button emotive theme light Forms single button emotive theme dark Forms single button productive theme light Forms single button productive theme dark
No buttons or title Forms no button or title emotive theme light Forms no button or title emotive theme dark Forms no button or title productive theme light Forms no button or title productive theme dark
Form as part of a wizard Forms as part of wizard emotive theme light Forms as part of wizard emotive theme dark Forms as part of wizard productive theme light Forms as part of wizard productive theme dark

Usage

Forms are used for users to submit data, it is important to keep it short and simple to avoid user frustration.

Formatting

Labels are used to inform users what the corresponding input fields mean. Input fields enable users to provide information and enter information that can be entered in a variety of ways such as text fields, checkboxes, radios and many more. Helper text provides assistance on how to fill out the field, this is optional. For example password must be of 8 characters. Paceholder text hints what goes into the field, this is also optional. Actions allows user to submit a form - these are buttons or button groups Validation ensures that data is submitted correctly.