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.

Select with static options

const countrySelectConfig = {
  type: 'select',
  data: {
    id: 'country',
    name: 'country',
    label: 'Country *',
    tooltip: 'Select your country of residence.',
    options: [
      { label: 'United States', value: 'us' },
      { label: 'Canada', value: 'ca' },
      { label: 'United Kingdom', value: 'uk' }
    ],
    placeholder: 'Select your country'
  }
}

Select with dynamic options

const dynamicSelectConfig = {
  type: 'select',
  data: {
    id: 'select',
    name: 'dynamicSelect',
    label: 'Select Post Title *',
    tooltip: 'Select a title from the list of posts.',
    fetchUrl: 'https://jsonplaceholder.typicode.com/posts',
    transformOptions: (options) => {
      return options.map((option: { title: string }) => ({
        value: option.title,
        label: option.title
      }))
    },
    placeholder: 'Select a title'
  }
}