Interface AutocompleteProps

interface AutocompleteProps {
    ariaLabel?: string;
    autoSelectionValue?: string;
    customAttribute?: {
        attribute: string;
        value: string | number;
    };
    description?: string;
    disabled?: boolean;
    drawerIsOpen?: boolean;
    endIcon?: Element;
    freeSolo?: boolean;
    hasError?: boolean;
    helperText?: string;
    hideClearButton?: boolean;
    highlightMatch?: boolean;
    id: string;
    inputRef?: RefObject<undefined | null | HTMLInputElement>;
    isExpanded?: boolean;
    label?: string;
    lang: "sv" | "en" | "no";
    name?: string;
    onArrowNavigation?: ((value: SelectedItemProps) => void);
    onBlur?: ((event: FocusEvent<HTMLInputElement, Element>) => void);
    onCancelClickHandler?: (() => void);
    onChange: ((item: SelectedItemProps) => void);
    onClick?: (() => void);
    onClose?: ((item: SelectedItemProps) => void);
    onCloseDrawer?: (() => void);
    onFocus?: (() => void);
    onSelect?: ((item: SelectedItemProps) => void);
    options: SelectedItemProps[];
    overrideDefaultOnSelectBehavior?: boolean;
    placeholder: string;
    popularValues?: string[];
    prepopulationLists?: PrepopulationList[];
    resultHeight?: number;
    scrollOffset?: number;
    shouldAlwaysUseSheet?: boolean;
    shouldKeepSearchQuery?: boolean;
    startIcon?: Element;
    titleComponent:
        | "h2"
        | "h3"
        | "h4"
        | "h1"
        | "h5"
        | "h6";
    translations: AutocompleteTranslation;
    useInlineSwapIcon?: boolean;
    value: string;
}

Properties

ariaLabel? autoSelectionValue? customAttribute? description? disabled? drawerIsOpen? endIcon? freeSolo? hasError? helperText? hideClearButton? highlightMatch? id inputRef? isExpanded? label? lang name? onArrowNavigation? onBlur? onCancelClickHandler? onChange onClick? onClose? onCloseDrawer? onFocus? onSelect? options overrideDefaultOnSelectBehavior? placeholder popularValues? prepopulationLists? resultHeight? scrollOffset? shouldAlwaysUseSheet? shouldKeepSearchQuery? startIcon? titleComponent translations useInlineSwapIcon? value

Properties

OptionalariaLabel

ariaLabel?: string

OptionalautoSelectionValue

autoSelectionValue?: string

OptionalcustomAttribute

customAttribute?: {
    attribute: string;
    value: string | number;
}

Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

Optionaldescription

description?: string

Optionaldisabled

disabled?: boolean

If true, the component is disabled.

OptionaldrawerIsOpen

drawerIsOpen?: boolean

OptionalendIcon

endIcon?: Element

OptionalfreeSolo

freeSolo?: boolean

OptionalhasError

hasError?: boolean

OptionalhelperText

helperText?: string

OptionalhideClearButton

hideClearButton?: boolean

OptionalhighlightMatch

highlightMatch?: boolean

id

id: string

OptionalinputRef

inputRef?: RefObject<undefined | null | HTMLInputElement>

OptionalisExpanded

isExpanded?: boolean

Optionallabel

label?: string

The label text.

lang

lang: "sv" | "en" | "no"

Optionalname

name?: string

OptionalonArrowNavigation

onArrowNavigation?: ((value: SelectedItemProps) => void)

Callback fired when navigating results with arrow keys

OptionalonBlur

onBlur?: ((event: FocusEvent<HTMLInputElement, Element>) => void)

Callback fired when focus leaves the input field

OptionalonCancelClickHandler

onCancelClickHandler?: (() => void)

onChange

onChange: ((item: SelectedItemProps) => void)

OptionalonClick

onClick?: (() => void)

OptionalonClose

onClose?: ((item: SelectedItemProps) => void)

OptionalonCloseDrawer

onCloseDrawer?: (() => void)

OptionalonFocus

onFocus?: (() => void)

OptionalonSelect

onSelect?: ((item: SelectedItemProps) => void)

options

options: SelectedItemProps[]

OptionaloverrideDefaultOnSelectBehavior

overrideDefaultOnSelectBehavior?: boolean

When true the components internal onSelect is overridden which otherwise runs alongside the passed in function

placeholder

placeholder: string

OptionalpopularValues

popularValues?: string[]

OptionalprepopulationLists

prepopulationLists?: PrepopulationList[]

OptionalresultHeight

resultHeight?: number

OptionalscrollOffset

scrollOffset?: number

OptionalshouldAlwaysUseSheet

shouldAlwaysUseSheet?: boolean

When true the component intially consists of a textfieldbutton opening the autocomplete within a sheet

OptionalshouldKeepSearchQuery

shouldKeepSearchQuery?: boolean

When true the input field will keep the user defined value and not display the currently selected option

OptionalstartIcon

startIcon?: Element

titleComponent

titleComponent:
    | "h2"
    | "h3"
    | "h4"
    | "h1"
    | "h5"
    | "h6"

translations

translations: AutocompleteTranslation

OptionaluseInlineSwapIcon

useInlineSwapIcon?: boolean

value

value: string

Settings

Member Visibility

On This Page

Properties