Multi select

Props

Name	Type	Default	Description
options	array	[]	List of options for the select/dropdown input. Each option should have a label and value.
name	string	-	Selects's name being registered field.
isDisabled	boolean	-	Disables the input field when true.
id	string	''	The unique identifier for the select field.
label	string	''	The label for the select field.
tooltip	string or ReactNode	-	Tooltip content to display additional information about the field.
fetchUrl	string	''	URL to fetch dynamic options for the select.
transformOptions	function	() => [{ label: '', value: '' }]	Function to transform fetched data into a compatible options array.

Multiselect with static options

const countrySelectConfig = {
  type: 'multiselect',
  data: {
    id: 'skills',
    name: 'skills',
    label: 'Select Your Skills *',
    tooltip: 'Choose the skills relevant to the job you are applying for.',
    options: [
      { label: 'JavaScript', value: 'javascript' },
      { label: 'Python', value: 'python' },
      { label: 'React.js', value: 'react' }
    ],
    placeholder: 'Select your skills'
  }
}

Multiselect with dynamic options

const dynamicSelectConfig = {
  type: 'multiselect',
  data: {
    id: 'countries',
    name: 'countries',
    label: 'Select Countries *',
    tooltip: 'Choose one or more countries.',
    fetchUrl: 'https://restcountries.com/v3.1/all', // Public API to fetch countries
    transformOptions: (options) => {
      return options.map((country: { name: { common: string } }) => ({
        label: country.name.common,
        value: country.name.common.toLowerCase()
      }))
    },
    placeholder: 'Select countries'
  }
}