Form Controls

Monsha’at applications use various Form Controls that cater to following use cases:

1. Form controls are used to capture data and information from users in most minimal and user-friendly way

2. Form controls are also used for users to be able to configure options.

3. Intuitive form controls provide a way for end users to be able to initiate a dialog, a conversation with the application

Below are the detailed guidelines on various types of form controls used across Monsha’at design solutions. Key UX principles (found in Principles section) such as minimalism, balanced visual hierarchy, ‘design over decoration’ have been kept in mind to design the controls.

14 Sections

Text Input Controls

Code



                                        

Password

Code



                                        

Tags – Auto Complete – User Input

Code



                                        

Input with preview

User can preview content for valid URL inputs

*To be used with Video and Image URLs. As soon as a valid URL is mentioned, the panel below comes up and shows the preview.

Table Builder

Code



                                        

Text Area

Code



                                        

Rich Text Editor

Default State

 

 

 

Select/Dropdown

Code



                                        

File Upload

Code



                                        

Checkbox

Code