import { SearchSelectInput } from "@vitality-ds/components";
SearchSelectInput is an asynchronous search input that allows users to get a select menu of options based on the search text. Under the hood, this component uses Async Select so for more information about how async requests are managed please see that documentation. Note all AsyncSelect props are valid for SearchSelectInput, and SearchSelectInput also requries name, id, onSearch and onChange props.
() => { function fetchPatients(inputValue) { const patientNames = [ { label: "John Campbell", value: "johnCampbell" }, { label: "Jonathan Cash", value: "jonathanCash" }, { label: "John Hawthorne", value: "johnHawthorne" }, { label: "John Smith", value: "johnSmith" }, { label: "John Wilson", value: "johnWilson" }, { label: "Johnny Wilson", value: "johnnyWilson" }, ]; return patientNames.filter((name) => name.label.toLowerCase().includes(inputValue.toLowerCase()) ); } async function loadOptions(inputValue) { const result = await fetchPatients(inputValue); return result; } return ( <SearchSelectInput onSearch={loadOptions} onChange={() => {}} name="name" id="id" /> ); };
SearchSelectInput renders a Search icon by default. This can be customised using the icon prop to any valid Vitality Icon, see Icons for more. Alternatively, to remove the icon, simply pass null.
() => { const requiredProps = { name: "name", id: "id", onChange: () => {}, onSearch: () => {}, }; return ( <Stack spacing="md"> <SearchSelectInput {...requiredProps} /> <SearchSelectInput icon={Hospital} {...requiredProps} /> <SearchSelectInput icon={null} {...requiredProps} /> </Stack> ); };
Description
Determines if the select input is enabled or not.
Type
boolean
Description
Boolean that indicates validation error.
Type
boolean
Description
Hides the drop down indicator
Type
boolean
Default Value
Description
Determines which icon will render within the search select. Defaults to 'Search' magnifying glass. Remove by passing null.
Type
IconPropType
Default Value
Search
Description
Id that pairs the input with the label
Type
string
Description
Id for the inner nested input element
Type
string
Description
Controls the current value of the input field
Type
string
Description
Boolean that determines if the input can be cleared once a value has been selected.
Type
boolean
Default Value
false
Description
Determines if more than one item can be selected from the select.
Type
boolean
Description
Boolean value that allows users to type into the input to search for a value
Type
boolean
Description
MenuPlacement Provides control of the placement of the menu in relation to the select input. valid options are "auto" (default), "top" and "bottom"
Type
"auto" | "bottom" | "top"
Default Value
"auto"
Description
MenuPosition Provides control of the position css property of the menu. This impacts layering and changes some placement behaviour, try to find which example is best for your use-case. Valid options are "absolute" (default) or "fixed". if the menu is portalled this prop is ignored and the position is set to "absolute" as absolute position in required to place correctly when portalled
Type
"absolute" | "fixed"
Default Value
"absolute"
Description
Minimum characters needed to be input before an asynchronous call is made
Type
number
Description
Name of the select input, should semantically reflect what the values are within - for eg. state for QLD, NSW etc.
Type
string
Description
Function that defines the component rendered when no options are available
Type
() => ReactNode
Description
Allows functions to run when component focus blurred
Type
(event: FocusEvent<HTMLInputElement, Element>) => void
Description
Function that handles change events on the select input.
Type
((newValue: (BaseOption & Omit<ChipProps, "chipCheckboxProps"> & { chipCheckboxProps?: ChipCheckboxType & { onClick?: (thisItem: BaseOption) => void; }; })[]) => void) | ((newValue: BaseOption) => void)
Description
Function that handles change events on the select input.
Type
(newValue: string) => void
Description
The function that loads the options asynchronously
Type
(searchText: string) => void | Promise<void>
Description
change the placeholder text
Type
string
Description
Dictates weather the menu should be portalled to the document body. This is useful when you don't want the menu to potentially cause the page to shift or you specifically don't want the portal in document flow. It will always portal to document.body, which can cause scrolling issues if the input is inside a scrollable element and the menu is not set to menuPlacement: "auto".
Type
boolean
Default Value
false
Description
Allows control over how the options list renders.
Type
RenderOptionType
Description
Number of milliseconds delay between typing into the input and the onSearch function being called.
Type
number
Default Value
250
Description
Default list of options to load before requested are made. Structure is an array of objects, each object has a label and value.
Type
OptionsOrGroups<Option, GroupBase<Option>>
Description
The Select component's stored value of selected item(s) The Select component's stored value of selected item
Type
string | BaseOption | (BaseOption & Omit<ChipProps, "chipCheckboxProps"> & { chipCheckboxProps?: ChipCheckboxType & { onClick?: (thisItem: BaseOption) => void; }; })[] | string[]
Description
Determines custom formatting to enable 'typeahead' select to act more as a TextInput then a select
Type
"default" | "typeahead"
Default Value
default