SelectorInput

Key Features

Supports asynchronous loading of items via URL (itemsUrl and valueUrl).
Allows clearing the selected value with a button if the clearable parameter is enabled.
Includes search and filtering functions for dropdown list items.
Automatically manages the selection state of items.
Built-in support for state management through the store.

Properties

• id (string):
  The ID of the input element, which can be used for identification in a form.
• name (string):
  The name of the input element, useful when working with forms and storage.
• class (string):
  A class for applying additional styles.
• classList (Record<string, boolean | undefined>):
  An object for dynamically managing classes.
• formId (string):
  The identifier of the form if this component is part of a form.
• placeholder (string):
  A placeholder to display in the input field when no value is selected.
• clearable (boolean):
  If true, a button appears to clear the selected value.
• wrappable (boolean):
  Determines whether text inside the dropdown can wrap to a new line.
• disabled (boolean):
  Disables interaction with the component.
• forceLoading (boolean):
  Enables a loading indicator (e.g., if items are loaded asynchronously).
• items (SelectorInputItem[]):
  An array of selectable items that will be displayed in the dropdown list.
• itemsUrl (string):
  URL for asynchronously loading items. The search text will be passed as a parameter.
• value (SelectorInputItem['id'] | SelectorInputItem | null):
  The selected value of the item. It can be an object or the ID of the item.
• valueUrl (string):
  URL for loading an item by its ID (for asynchronously loading the selected item).
• itemComponent (function):
  A custom component for displaying each item in the dropdown list.
• valueComponent (function):
  A custom component for displaying the selected item in the input field.
• onSelect (function):
  Handler called when an item is selected.
• onInput (function):
  Handler called when text is entered to filter items.
• onTextInput (function):
  Handler for text input in the search field.
• onKeyDown (function):
  Handler for keydown events.
• store ([get: any, set: (field: string, value: string | number | null) => void]):
  Store for managing the selection state of items.
• style (JSX.CSSProperties | string):
  Inline styles for the component.
• ref (Ref<SelectorInputApi>):
  Reference for accessing the component's methods from outside.