Skip to main content

Input Controls

Input controls are used in the app’s user interface to take user inputs, which makes it interactive to use and are commonly used in screen design. Refer to specific component guidelines while designing it in Figma to get them correctly identified in DhiWise.

tip

While designing any component, use Frame as its background base to easily identify the component.

TextField​

Generally, TextField has a main text on top with a name that says which type of field it is and a field to enter an input below with a hint text for reference inside it.

The Rectangle and the Text above it must be placed in a proper hierarchy, with text on top followed by the rectangle with its hint text.

Example banner

Also, manage proper layering while designing TextField, to get it identified in your application.

As shown above, username field is managed inside a single group with its main text, hint text, and input field rectangle all inside a single group.

FloatingTextField​

Outline case​

FloatingTextField designed with an outline must have the main text included within the outline, and the hint text for it must be inside the outline, as shown below First name is the main text, and first name here is the hint text;

Example banner

Fill case​

The FloatingTextField with a filled case must have a filled rectangle with the two texts inside, and the filled rectangle should only have the top two corners rounded and normal bottom corners with an outline at the bottom.

Example banner

SearchView​

For Search view, it must have a group with a search icon and a related text inside it.

Example banner

Radio​

Circular shape for Radio must be designed using Ellipse only.

If multiple Ellipses exist, place them all in one group for a better design hierarchy.

Radio’s Ellipse and Text should be in a proper group as below;

Example banner

Checkbox​

Checkbox’s box must be designed using Rectangle only. Box shape and its Text should be in a single group.

Example banner

Switch​

A Switch is a two-state user interface element used to toggle between ON or OFF states. Typically, it is a button with a thumb slider that the user can drag back and forth to choose an option inside its rectangle background.

caution

Switch having a text in its background rectangle is not supported.

caution

The color of the Switch and its background rectangle should not be the same.

Inside thumb case​

If the button for the switch in the thumb slider is designed inside the background rectangle area, then it should lie in the inner area of that background entirely.

Example banner

Outside thumb case​

If the button for the switch in the thumb slider is designed bigger than the background rectangle area, it should be bigger but must lie on the area of the rectangle background.

Example banner

OTPView​

OTPView should have at least four and a maximum of six views which are used to enter the value for the OTP code. These views must be aligned with each other and placed in the center of the screen design.

Reference: Below is the OTP View Group with four input views, which are all inside a single group, aligned with each other, and set in the center of the screen.

Example banner

Underline case​

Input views must be designed using Line for all the input values of an OTP view, aligned with each other, and placed in the center of the screen inside a single group, as shown below.

Example banner

A single group for dropdown with an arrow facing the bottom direction on the right, and the main text or hint text attached with it.

Reference: Below is a dropdown with the main text as City and the hint text as Select City, and an arrow on the right, all inside a single group.

Example banner

TextArea​

TextArea is used to get a text input with multi-line.

For TextArea use Rectangle and Text inside it as a hint text to get it easily identified in DhiWise.

Example banner



Got a question? Ask here.