SelectInputMulti

import { SelectInputMulti } from '@uhg-abyss/mobile';

label

hintText

isDisabled

isSearchable

selectAll

helpContent

() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-sandbox"
        label="Your favorite framework/library"
        isSearchable
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};

Usage

Use the options prop to supply the options that can be selected. options is an array of objects, where each object should have two properties:

label, a string which is how the option will be displayed in the list
value, a string which is the unique identifier for the option

Sections can also be specified, in which case the section object should have title, value, and items properties instead of label and value (See Titles for more details).

options = {
  [
    { label: 'Item 1', value: 'item1' },
    { label: 'Item 2', value: 'item2', isDisabled: true },
    { label: 'Item 3', value: 'item3' },
    { label: 'Item 4', value: 'item4' },
    { label: 'Item 5', value: 'item5' },
  ]
}

useForm (recommended)

Using the useForm hook with FormProvider sets state for the component.

useState

Using the useState hook gets values from the component state.

Titles

To create sections in the list, pass objects into the options array that have the title, value, and items properties. title specifies the name of the title, which will be bolded and not selectable, value is the unique identifier for the title, while items should contain the options within that section (with the same label/value format as normal).

options = {
  [
    {
      title: 'Title 1',
      value: 'Title1',
      items: [
        { label: 'item 1', value: 'item11' },
        { label: 'item 2', value: 'item12', isDisabled: true },
        { label: 'item 3', value: 'item13' },
      ],
    },
  ]
}

Label

Use the label prop to display a label above the input menu.

Required

Use the isRequired prop to display an asterisk next to the label.

Hint Text

Use the hintText prop to display text below the label.

Help Content

Use the helpContent prop to display a help icon in the top right of the container, which will display the provided content in a modal screen when pressed.

Messages

Use the errorMessage and successMessage props to display a custom error or success message below the menu.

Disabled

Set the isDisabled prop to true to disable the select list input field so users cannot select a value.

Disable Option Items

Disable an individual option item by setting the isDisabled key to true within the object.

Select All

By setting the selectAll property to true you can make a "Select All" option visible at the top of the dropdown. When selected, all options will be selected. When deselected, all options will be deselected.

Searchable

Use the isSearchable prop to display an input field for the user to search/filter the list of options that is located inside the dropdown.

Fuse.js

Search Bar filtering uses the Fuse.js library to fuzzy filter results. What is fuzzy searching? Generally speaking, fuzzy searching (more formally known as approximate string matching) is the technique of finding strings that are approximately equal to a given pattern (rather than exactly).

Fuse Data

The options prop is the information that fuse will filter on and display in the search dropdown.

Fuse Configurations

The fuse search options are set by default as follows. The keys are set to label and cannot be changed.

{
  keys: ['label', 'items.label'],
  includeMatches: true,
  findAllMatches: true,
  threshold: 0,
  ignoreLocation: true,
  minMatchCharLength: searchText.length,
}

Custom Fuse Configurations

You can customize the fuse filter by following the documentation on Fuse and passing your configurations into the fuseConfigs prop. To get the filtered list back, be sure includeMatches is always set to true.

Custom Filtering

Use the customFilter prop to override the fuse.js filtering. The results returned from your customFilter function should be passed into the options prop. In the example function below, the filter is checking the first letter typed in the search bar against the first letter of each item in the list. If the letter is a match the item is included in the filtered list. Any 'type-ahead' styles will not be applied when a custom filtering function is being used.

Notes

In order for a user to select an item from the menu while the softkeyboard is up, the prop keyboardShouldPersistTaps is set to 'always'. If the menu is contained in a ScrollView, keyboardShouldPersistTaps={'always'} should be set with in that view. This allows for the keyboard to remain open and an item to be selected on initial tap.