doc-burger

Dropdown

A component that allows data entry by selecting from a predefined list

A dropdown is a user interface element that allows users to select a value from a predefined list of options.

dropdown component of Peaka

Key Features

Dropdowns have the following key features:

  • Value: The value of a dropdown must be enclosed in curly braces and represents the selected option.

  • Options Input: Specify the available options for the dropdown. Each option must be an object within an array.

  • Option Label: The option label is what will be displayed for each option in the dropdown.

  • Option Value: The option value is the underlying value associated with each option.

  • Label: The label is the text displayed above the dropdown, providing context for the user.

  • Hint: A hint can be displayed below the dropdown to offer additional guidance or information.

  • Placeholder: Optionally, specify a placeholder text to describe the expected value of the dropdown.

  • Disabled: When enabled, the "Disabled" option makes the dropdown unchangeable, preventing user interaction.

  • Styles: Customize the initial styles of the dropdown to match your application's design.

How to Use Dropdowns

To use dropdowns in your application, follow these steps:

  1. Value: Utilize the "Value" property to set or retrieve the selected option value enclosed in curly braces.

  2. Options Input: Define the available options by providing an array of objects with label and value properties.

  3. Label: Add a descriptive label above the dropdown to provide context for the user.

  4. Hint: Include a hint below the dropdown to offer additional guidance or instructions to users.

  5. Placeholder: Optionally, specify a placeholder text to describe the expected option.

  6. Disabled State: Use the "Disabled" option to make the dropdown unchangeable when necessary.

Use Cases

Dropdowns are commonly used in various scenarios, including:

  • Selection: Allow users to select options from a list, such as choosing a country, city, or category.

  • Filtering: Use dropdowns as filters to narrow down search results or apply specific criteria.

  • Form Inputs: Include dropdowns in forms to collect data or preferences from users.

  • Configuration: Utilize dropdowns in configuration panels to set application settings or preferences.

Dropdowns enhance user interactions by simplifying option selection and improving the usability of your application.