Dropdowns are a phenomenal way to display multiple choices without taking up a lot of UI space.
A dropdown component is a module that displays a data set when clicked on. The data set is presented as a list, and is often populated with clickable entries. In its default state, the dropdown displays a placeholder text, sometimes the first entry in the dataset, other times something more generic like “see more.”
State pickers are almost always presented as dropdown components. The dataset (list of state names) is alphabetical, and Alabama finds itself as the default value, making online shopping in Alabama super easy.
E-commerce sites frequently use dropdown components in their product detail pages. The dataset for the dropdown can be clothing size, product category, and so on. Since there are many, many, choices, dropdown components serve to make the user experience easier.
There are two main ways to populate dropdown menus. For simple applications, a dropdown component can be populated with a list of existing strings, which is submitted with the rest of a form. State pickers and E-commerce sites use cases both use this method.
The other method, used in application development, populates dropdown components dynamically with a function.
For instance, an HR application that lists employees in a specific department. The dropdown menu connects to a datasource of all employee records, but filters based on other criteria to only display the pertinent values.
In JavaScript, a dropdown menu entails a select option and a list of entries to select from. In lieu of creating a custom react component, the React-select library has dynamic searching, filtering, and a flexible Select Input tool.
For more reading on building a dropdown component by yourself, check out the JS-Tutorials guide on creating a React dropdown list.
To quickly include a dropdown component as part of a larger system, Internal is the way to go. In Internal, dropdown components are automatically generated as soon as a data source is connected.
Users can leverage this component to easily associate records, use the dropdown’s value to prefill fields in another component, and even filter multiple components to be filtered on a single criterion once a dropdown selection has been made.
For more information, check out Internal’s dropdown component documentation.
