@foundationcomponentrepo/multi-select-field

Base multi-select-field component for foundation

This is the Multi Select Dropdown component with search field; for foundation

Props

options: Array<option> (Required)

The options prop is to pass an array of option objects, each of which represent an option in the Multi Select dropdown. The interface of option is provided below.

interface option {
  id: string;
  data: string;
  active: boolean;
}

label?: string

The label prop is to pass a string, which is displayed as the placeholder of the input search field within the dropdown.

dropdownHeight?: number

The dropdownHeight prop is to pass a number, which decides the max number of options to be displayed in the dropdown list at once. If the number of total options exceeds dropdownHeight, then a scroll bar appears in the dropdown list.

onClick?: (e: any) => void

The onClick prop is to pass a function, which can be used to capture the options selected, outside the component. This enables transfer of data from the component to the application level.

The component data, (i.e., the Selected options in this case) can be accessed as follows:

e.target.id       ->  Option ID
e.target.value    ->  Option Data
e.target.checked  ->  Option Active State (true if selected, else false)

Install

npm install --save @foundationcomponentrepo/multi-select-field

License

MIT © unplatforms