doc-burger

Multi-select

A component allowing users to select multiple options from a list

A multi-select component enables users to select multiple options from a list, providing flexibility in data entry and selection.

multi-select component of Peaka

Key Features

Multi-select components offer the following key features:

  • Value: The value of a multi-select is an array that contains the selected option values as strings. Users can select multiple options simultaneously.

  • Options: The "Options" input allows you to define the available options for selection. Each option should be an object within an array.

  • Option Label: The "Option Label" property specifies the label or display text for each option.

  • Option Value: The "Option Value" property assigns a value to each option.

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

  • Hint: A hint can be displayed below the multi-select to offer additional guidance or instructions to users.

  • Placeholder: Optionally, specify a placeholder text to describe the expected selection.

  • Disabled: When enabled, the "Disabled" property makes the multi-select unchangeable, preventing user interaction.

  • Styles: Customize the initial styles of the multi-select to align with your application's design.

How to Use Multi Selects

To use multi-select components in your application, follow these steps:

  1. Value: Utilize the "Value" property to set or retrieve the selected options as an array of values.

  2. Options: Define the available options using the "Options" input, and configure each option with labels and values.

  3. Label: Add a descriptive label above the multi-select to provide context for the user.

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

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

  6. Disabled State: Use the "Disabled" property to make the multi-select unchangeable when necessary.

Use Cases

Multi-select components are commonly used in various scenarios, including:

  • Selecting multiple options: Allow users to select multiple options from a list, such as tags, categories, or preferences.

  • Filtering and sorting: Implement multi-selects in filter and sorting panels for refining search results.

  • Form inputs: Include multi-selects in forms for collecting multiple choices, such as interests or skills.

  • Data entry: Use multi-selects for inputting data involving multiple selections, such as assigning tasks to multiple users.

Multi-select components enhance user interactions by simplifying the selection of multiple options and improving the usability of your application.