Basic |
![](/wp-content/uploads/UI-text.png) |
Text Field – Used for single-line input. |
![](/wp-content/uploads/UIForms-text.png) |
![](/wp-content/uploads/UI-textarea.png) |
Text Area – Used for multi-line entry. |
![](/wp-content/uploads/UIForms-textarea.png) |
![](/wp-content/uploads/UI-number.png) |
Number – Used for numerical entries. |
![](/wp-content/uploads/UIForms-number.png) |
![](/wp-content/uploads/UI-radio.png) |
Radio Button – Used as a selection option from a given list. |
![](/wp-content/uploads/UIForms-radio.png) |
![](/wp-content/uploads/UI-dropdown.png) |
Drop-down – Used as a selection option from a given list; can be multi-select. |
![](/wp-content/uploads/UIForms-dropdown.png) |
![](/wp-content/uploads/UI-checkbox.png) |
Checkbox – Used for multi-select option from a given list. |
![](/wp-content/uploads/UIForms-checkbox.png) |
![](/wp-content/uploads/UI-date.png) |
Date – Used for date entries, gives a date picker for the user to choose the date. |
![](/wp-content/uploads/UIForms-date.png) |
![](/wp-content/uploads/UI-date.png) |
Date & Time – Used for date and time entries, give a date and time picker for the user to choose the date and time.
Use the Date component and set the Time option to yes; choose from 12- or 24-hour format. |
![](/wp-content/uploads/UIForms-datetime.png) |
![](/wp-content/uploads/UI-phone.png) |
Phone Number – Used for phone number entries, allows the user to choose the country code. |
![](/wp-content/uploads/UIForms-phone.png) |
![](/wp-content/uploads/UI-email.png) |
Email – Used for email address entries, validates for xxx@uuu.com format. |
![](/wp-content/uploads/UIForms-email.png) |
![](/wp-content/uploads/UI-toggle.png) |
Toggle – Used for switching between two values, ideal for yes/no type of inputs. |
![](/wp-content/uploads/UIForms-toggle.png) |
![](/wp-content/uploads/UI-address.png) |
Address – Used for address entries. |
![](/wp-content/uploads/UIForms-address.png) |
![](/wp-content/uploads/UI-url.png) |
URL – Used for web URL entries, validates for xxx.com format. |
![](/wp-content/uploads/UIForms-url.png) |
![](/wp-content/uploads/UI-slider.png) |
Range Slider – Value selection between specified min and max values; can be represented as a percentage. |
![](/wp-content/uploads/UIForms-slider.png) |
Advanced |
![](/wp-content/uploads/UI-button.png) |
Button – Used as a clickable component to submit, or reset, or open an external URL on the form. Choose from Primary, Secondary, Tertiary, Ghost, or Danger. |
![](/wp-content/uploads/UIForms-buttons.png) |
![](/wp-content/uploads/UI-label.png) |
Label – Used to display a static text box, no action is required from the user. |
![](/wp-content/uploads/UIForms-label.png) |
![](/wp-content/uploads/UI-protip.png) |
Protip – Used to mark important information for the end-user, no user action required. |
![](/wp-content/uploads/UIForms-protip.png) |
![](/wp-content/uploads/UI-notes.png) |
Note – Used to mark information for the end-user, no user action required. |
![](/wp-content/uploads/UIForms-notes.png) |