Forms

Read about our dashboard design system and its visual components.

Version 1.0
Login form

Form fields vary in sizes and can be applied flexibly depending on the context. The below example is a simple login form with large sized field and submit button. Labels above fields are optional, however a placeholder text must be used if the label is omitted.

  • Size vary depending on level of emphasize and context
  • Placeholder text must be used if labels are omitted

Sign in to your account

Don't have an account? Sign up

Form fields

The below example is a list of all the different field designs we support inside the dashboard. The toggle slide checkbox should only be used in situations where enabling would cause an immediate action.

  • Only use toggle slide checkboxes for immediate action
  • Keep label text short and concise
Disabled fields

All field types can be disabled with the disabled attribute. Do not apply any colors on disabled fields, only the colors shown in the example are allowed.

  • Append the disabled attribute to disable fields
  • Do not introduce colors to disabled fields
Field sizes

There are five text field sizes to choose from. By default, use the medium size fields for common forms. Large size fields are reserved for short and one-off forms such as the sign in pages. Other sizes are reserved for special situations only.

  • Use medium size fields for common forms
  • Do not mix field sizes
Field states

Text and select fields can have three states, success, warning, and danger. Field states should only be activated post submission.

  • Activate state only after submission