### renderEmptyState - type: (value: string | number | undefined) => ReactNode - description: Function which returns custom node shown when no options are available. ### expandable - type: boolean - description: Specifies whether to collapse input to search icon only. Once clicked, the icon expands to a full search input. - default: false ### expandWidth - type: string | number - description: Specifies the width of an input in an expanded state. - default: '100%' ### expandDirection - type: "right" | "left" - description: Specifies the direction of expansion animation when expandable is true. - default: 'right' ### predicate - type: (option: DropdownLayoutValueOption) => boolean - description: Defines a custom function for options filtering. ### debounceMs - type: number - description: Specifies the `onChange` debounce in milliseconds. - default: 0 ### onExpandTransitionStart - type: (collapsed: boolean) => void - description: Callback function that is called when the expandable input starts expanding or collapsing. ### onExpandTransitionEnd - type: (collapsed: boolean) => void - description: Callback function that is called when the expandable input finishes expanding or collapsing. ### size - type: "small" | "tiny" | "medium" | "large" - description: Controls the size of the input and its dropdown options. `tiny` and `small` inputs render `small` options, the rest render `medium` ones. - default: 'medium' ### autocomplete - type: string - description: Sets the value of the native `autocomplete` attribute of the input. - default: 'off' ### inputElement - type: ReactElement - description: Use a customized input component instead of the default ### closeOnSelect - type: boolean - description: Closes DropdownLayout on option selection. - default: true ### onManuallyInput - type: ManualInputFnSignature - description: A callback which is called when the user performs a Submit-Action. Submit-Action triggers are: "Enter", "Tab", [typing any defined delimiters], Paste action. `onManuallyInput(values: Array): void - The array of strings is the result of splitting the input value by the given delimiters ### valueParser - type: (option: DropdownLayoutValueOption) => ReactNode | RenderOptionFn - description: Function that receives an option, and should return the value to be displayed. ### dropdownWidth - type: string - description: Sets the width of the dropdown. - default: null ### dropdownOffsetLeft - type: string - description: Sets the offset of the dropdown from the left. - default: '0' ### customDropdownContent - type: ReactNode - description: Accepts any content to render in the dropdown instead of the options list. Ignored when `native` is `true`. ### showOptionsIfEmptyInput - type: boolean - description: Controls whether to show options if input is empty. - default: true ### highlight - type: boolean - description: Mark in bold word parts based on search pattern. ### native - type: boolean - description: Indicates whether to render using the native select element. - default: false ### popoverProps - type: PopoverCommonProps - description: Accepts common popover props that are passed to the options dropdown popover. - linkTypeTo: Popover ### onSelect - type: (option: DropdownLayoutValueOption, sameOptionWasPicked: boolean) => void - description: Defines a callback function which is called when the user selects an option from the list. When `highlight` is `true`, it receives the original option from `options`. ### onOptionsShow - type: () => void - description: A callback which is called when options dropdown is shown. ### onOptionsHide - type: () => void - description: A callback which is called when options dropdown is hidden. ### showDrawerOnMobile - type: boolean - description: Controls whether to show drawer on mobile devices. - default: true ### children - type: ReactNode - description: No description ### dataHook - type: string - description: Applies a data-hook HTML attribute that can be used in the tests. ### className - type: string - description: Specifies a CSS class name to be appended to the component's root element. - internal ### id - type: string - description: Assigns a unique identifier for the root element. ### role - type: string - description: Specifies the role of the input element for accessibility. ### ariaControls - type: string - description: Associate a control with the regions that it controls. ### ariaDescribedby - type: string - description: Associate a region with its descriptions. Similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space. ### ariaLabel - type: string - description: Define a string that labels the current element in case where a text label isn't visible on the screen. ### autoFocus - type: boolean - description: Focus the element on mount (standard React input autoFocus) ### autoSelect - type: boolean - description: Automatically selects the entire input text. ### defaultValue - type: string | number - description: Defines the initial value of an input. ### disabled - type: boolean - description: Specifies whether input should be disabled or not. ### status - type: "error" | "warning" | "loading" - description: Specify the status of a field. ### statusMessage - type: ReactNode - description: Defines the message to display on status icon hover. If not given or empty, no tooltip is displayed. ### statusMessageTooltipProps - type: TooltipCommonProps - description: Status message tooltip props. ### hideStatusSuffix - type: boolean - description: Specifies whether status suffix should be hidden. ### forceFocus - type: boolean - description: Forces the focus state on the input. - internal ### forceHover - type: boolean - description: Forces the hover state on the input. - internal ### maxLength - type: number - description: Sets the maximum number of characters that can be inserted to a field. ### menuArrow - type: boolean - description: Specifies whether input should have a dropdown menu arrow on the right side. ### clearButton - type: boolean - description: Displays clear button (X) on a non-empty input. ### focusOnClearClick - type: boolean - description: Specifies whether to focus the field when clear button is clicked. ### name - type: string - description: Reference element data when a form is submitted. ### border - type: "none" | "standard" | "round" | "bottomLine" - description: Control the border style of input. ### backgroundColor - type: string - description: Sets the background color of the input. Accepts any CSS color value. ### noLeftBorderRadius - type: boolean - description: Specifies whether input shouldn't have rounded corners on its left. ### noRightBorderRadius - type: boolean - description: Specifies whether input shouldn't have rounded corners on its right. ### onBlur - type: FocusEventHandler - description: Defines a standard input onBlur callback. ### onChange - type: ChangeEventHandler - description: Defines a standard input onChange callback. ### onClear - type: (event: KeyboardEvent | MouseEvent) => void - description: Displays clear button (X) on a non-empty input and calls a callback function. ### onCompositionChange - type: (isComposing: boolean) => void - description: Defines a callback function called on compositionstart/compositionend events. ### onEnterPressed - type: KeyboardEventHandler - description: Defines a callback handler that is called when the user presses -enter-. ### onEscapePressed - type: KeyboardEventHandler - description: Defines a callback handler that is called when the user presses -escape-. ### onFocus - type: FocusEventHandler - description: Defines a standard input onFocus callback. ### onInputClicked - type: MouseEventHandler - description: Defines a standard input onClick callback. ### onKeyDown - type: KeyboardEventHandler - description: Defines a standard input onKeyDown callback. ### onKeyUp - type: KeyboardEventHandler - description: Defines a standard input onKeyUp callback. ### onPaste - type: ClipboardEventHandler - description: Defines a callback handler that is called when user pastes text from a clipboard (using a mouse or keyboard shortcut) ### onCopy - type: ClipboardEventHandler - description: Defines a callback handler that is called when user copies text to a clipboard (using a mouse or keyboard shortcut) ### placeholder - type: string - description: Sets a placeholder message to display. ### prefix - type: ReactNode - description: Pass a component you want to show as the prefix of the input, e.g., text, icon. ### readOnly - type: boolean - description: Specifies whether input is read only. ### disableEditing - type: boolean - description: Restricts input editing. ### rtl - type: boolean - description: Specifies text direction. If true, the text is displayed from right to left. ### suffix - type: ReactNode - description: Pass a component you want to show as the suffix of the input, e.g., text, icon. ### tabIndex - type: number - description: Indicates that element can be focused and where it participates in sequential keyboard navigation. ### textOverflow - type: "ellipsis" | "clip" - description: Handles text overflow behavior. It can either `clip` (default) or display `ellipsis`. ### tooltipPlacement - type: "right" | "left" | "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom-start" | "left-end" | "left-start" - description: Controls placement of a status tooltip. - deprecated ### type - type: string - description: Specifies the type of `` element to display. Default is text. ### value - type: string | number - description: Specifies the current value of the element. ### withSelection - type: boolean - description: No description ### required - type: boolean - description: Specifies whether input is mandatory. ### min - type: number - description: Sets a minimum value of an input. Similar to HTML5 min attribute. ### max - type: number - description: Sets a maximum value of an input. Similar to html5 max attribute. ### step - type: number - description: Specifies the interval between number values. ### customInput - type: ReactNode | Function - description: Render a custom input instead of the default html input tag. ### pattern - type: string - description: Sets a pattern that typed value must match to be valid (regex) ### inputRef - type: null | (instance: HTMLInputElement | null) => void | RefObject - description: Ref to the underlying `` DOM element. Accepts callback and object refs. Use for input masking libraries such as `use-mask-input`. Memoize callback refs to avoid reattaching on every render. ### inputmode - type: string - description: Sets the value of the native `inputmode` attribute, which tells mobile browsers which on-screen keyboard to show, for example `numeric` or `email`. ### enterKeyHint - type: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" - description: Sets the label of the virtual keyboard's enter key on touch devices. ### ariaRoledescription - type: string - description: Sets the `aria-roledescription` attribute of the `` element, giving assistive technologies a readable description of its role. ### clearButtonTooltipContent - type: ReactNode - description: When provided, hovering displays a tooltip with this content. ### clearButtonTooltipProps - type: TooltipCommonProps - description: Clear button tooltip props. ### clearButtonAriaLabel - type: string - description: Aria label for the clear button. ### inputElementRef - type: any - description: Specifies reference of the input element. - internal ### dropDirectionUp - type: boolean - description: Specifies whether the list opens upward. Aligns the list container to the bottom and positions the arrow for upward direction. - deprecated ### focusOnSelectedOption - type: boolean - description: Scroll view to the selected option on opening the dropdown. ### onClose - type: () => void - description: Callback function called whenever the user press the `Escape` keyboard. ### onOptionMarked - type: (option: DropdownLayoutValueOption | null, optionElementId?: string | undefined) => void - description: Callback function called whenever an option becomes focused (hovered/active). Receives the relevant option object from the original props.options array. ### onOptionsNavigate - type: (option: DropdownLayoutValueOption | null) => void - description: Callback function called whenever the user navigates to an option (via keyboard or mouse). Receives the relevant option object from the original props.options array, or null when navigation is cleared. ### visible - type: boolean - description: Should show or hide the component. ### options - type: DropdownLayoutOption[] - description: Array of objects: - id `` *required*: the id of the option, should be unique. - value `` *required*: can be a string, react element or a builder function. - disabled `` *default value- false*: whether this option is disabled or not - linkTo ``: when provided, the option is an anchor to the given value - title `` *default value- false* **deprecated**: use `listItemSectionBuilder` to render a title instead. - overrideStyle `` *default value- false* **deprecated**: use `overrideOptionStyle` to override option styles instead. - overrideOptionStyle `` *default value- false* - when set to `true`, the option is responsible for its own styles. No styles are applied from the DropdownLayout itself. - label ``: the string displayed within an input when the option is selected. This is used when using `` with an ``. ### selectedId - type: string | number - description: The id of the selected option in the list. ### onClickOutside - type: (e: MouseEvent | TouchEvent) => void - description: Defines a callback function which is called when the user clicks or touches outside the list while it's visible. - deprecated ### fixedHeader - type: ReactNode - description: A fixed header to the list. ### fixedFooter - type: ReactNode - description: A fixed footer to the list. ### maxHeightPixels - type: string | number - description: Set the max height of the dropdownLayout in pixels. ### minWidthPixels - type: string | number - description: Set the min width of the dropdownLayout in pixels. ### withArrow - type: boolean - description: Displays an arrow on the list container while it's visible. - deprecated ### onMouseEnter - type: MouseEventHandler - description: Callback function called whenever the user entered with the mouse to the dropdown layout. ### onMouseLeave - type: MouseEventHandler - description: Callback function called whenever the user exited with the mouse from the dropdown layout. ### onMouseDown - type: MouseEventHandler - description: Callback function called whenever the user clicks the dropdown layout. ### itemHeight - type: "big" | "small" - description: Controls the minimum height of options that aren't builder options. - default: 'small' - deprecated ### selectedHighlight - type: boolean - description: Whether the selected option is highlighted when the dropdown reopens. - default: true ### inContainer - type: boolean - description: Whether the `` is in a container component. If `true`, some styles such as shadows, positioning and padding are added to the component contentContainer. ### infiniteScroll - type: boolean - description: Set this prop for lazy loading of the dropdown layout items. ### loadMore - type: (page: number) => void - description: A callback called when more items are requested to be rendered. ### hasMore - type: boolean - description: Whether there are more items to be loaded. ### markedOption - type: string | number | false | true - description: Sets the default hover behavior when: 1. `false` means no default 2. `true` means to hover the first selectable option 3. Any number/string represents the id of option to hover ### overflow - type: "visible" | "hidden" | "auto" | "scroll" - description: Set overflow of container. ### focusOnOption - type: string | number - description: Marks (not selects) and scrolls view to the option on opening the dropdown by option id. ### scrollToOption - type: string | number - description: Scrolls to the specified option when dropdown is opened without marking it. ### listType - type: "select" | "action" - description: Defines type of behavior applied in list. ### scrollbar - type: "fixed" | "overlay" - description: Controls which type of scrollbar to render. ### listboxId - type: string - description: Defines the id for the listbox. ### onDrillIn - type: (option: DropdownLayoutValueOption) => void - description: Called when the user presses ArrowRight on a hovered option. Use to move focus into an interactive child element (e.g. an actions menu). ### onDrillOut - type: () => void - description: Called when the user navigates back from a drilled-in child element (e.g. via ArrowLeft or Escape). Use to restore focus to the trigger input.