EDS – Equinor Design System

Inputs

Inputs are fields or menus that allow the user to write custom input or make a selection out of predefined choices.

A menu (also known as a dropdown) displays a list of choices on temporary surfaces allowing the user make one or multiple selections. The elements needed to create a menu in Figma are the menu container and menu items. An interaction with an icon, button or other control is needed for the menu to appear. Menus should be easily scannable, easy to interact with and suited to the user’s needs.

FigmaExternal linkFigma design for dropdown menu

Multiselect dropdown menu

Watch the short video below to learn how to make a multiselect dropdown menu. All the other dropdown menus in the example image above follow the same convention, and can easily be made by adding some extra components. The selected items could be shown with checkboxes or chips inside the field, inside the menu or below the field.

Video

Contextual menu

Contextual menus appear next to where a user right clicks. The menu displays a set of actions related to the object that has been selected, based on the application’s current state.

FigmaExternal linkFigma design for contextual menu

✏️ Edit this page on GitHub