Interface AutocompleteProps

Props for the custom Autocomplete component.

interface AutocompleteProps {
    background?:
        | "primary"
        | "blue5"
        | "white"
        | "textFaded"
        | "navigation"
        | "navigationTop"
        | "navigationSide"
        | "background"
        | "drawer"
        | "cards"
        | "cardDivider"
        | "cardSectionSeparator"
        | "fieldsOnCard"
        | "fieldsFloating"
        | "buttonSecondary"
        | "iconsDisabled"
        | "red"
        | "orange"
        | "greenDark"
        | "greenLight"
        | "text"
        | "redDark"
        | "orangeDark"
        | "greenDark2"
        | "blueDark"
        | "lineColor"
        | "iconButtonBg";
    backgroundColor?: string;
    badgeSelectedCount?: boolean;
    clearable?: boolean;
    defaultValue?: string
    | string[]
    | DropdownOption
    | DropdownOption[];
    inputLabel?: string;
    isNarrow?: boolean;
    labelColor?: string;
    noDropIcon?: boolean;
    onChange?: (value: null | string | string[]) => void;
    onClear?: () => void;
    options: DropdownOption[];
    required?: boolean;
    selectedColor?:
        | "primary"
        | "blue5"
        | "white"
        | "textFaded"
        | "navigation"
        | "navigationTop"
        | "navigationSide"
        | "background"
        | "drawer"
        | "cards"
        | "cardDivider"
        | "cardSectionSeparator"
        | "fieldsOnCard"
        | "fieldsFloating"
        | "buttonSecondary"
        | "iconsDisabled"
        | "red"
        | "orange"
        | "greenDark"
        | "greenLight"
        | "text"
        | "redDark"
        | "orangeDark"
        | "greenDark2"
        | "blueDark"
        | "lineColor"
        | "iconButtonBg";
    size?: "small"
    | "medium";
    startLabel?: ReactNode;
    useAllAsDefault?: boolean;
    value?: null | string | string[] | DropdownOption | DropdownOption[];
    width?: string | number;
}

Hierarchy (View Summary)

Properties

background? backgroundColor? badgeSelectedCount? clearable? defaultValue? inputLabel? isNarrow? labelColor? noDropIcon? onChange? onClear? options required? selectedColor? size? startLabel? useAllAsDefault? value? width?

Properties

Optionalbackground

background?:
    | "primary"
    | "blue5"
    | "white"
    | "textFaded"
    | "navigation"
    | "navigationTop"
    | "navigationSide"
    | "background"
    | "drawer"
    | "cards"
    | "cardDivider"
    | "cardSectionSeparator"
    | "fieldsOnCard"
    | "fieldsFloating"
    | "buttonSecondary"
    | "iconsDisabled"
    | "red"
    | "orange"
    | "greenDark"
    | "greenLight"
    | "text"
    | "redDark"
    | "orangeDark"
    | "greenDark2"
    | "blueDark"
    | "lineColor"
    | "iconButtonBg"

OptionalbackgroundColor

backgroundColor?: string

Background color (theme-based or custom) for the input field.

OptionalbadgeSelectedCount

badgeSelectedCount?: boolean

Whether to show a badge indicator for selected count (multi-select only).

Optionalclearable

clearable?: boolean

If true, displays a clear 'X' button.

OptionaldefaultValue

defaultValue?: string | string[] | DropdownOption | DropdownOption[]

Default value used in uncontrolled mode.

OptionalinputLabel

inputLabel?: string

Placeholder text when nothing is selected.

OptionalisNarrow

isNarrow?: boolean

If field is narrow.

OptionallabelColor

labelColor?: string

Color name (theme-based) for the startLabel text.

OptionalnoDropIcon

noDropIcon?: boolean

Optional prop to disable the dropdown icon. If true, the dropdown icon will not be displayed.

OptionalonChange

onChange?: (value: null | string | string[]) => void

Callback triggered when the selection changes.

OptionalonClear

onClear?: () => void

Callback triggered when the clear 'X' button is clicked. This will be called in addition to the regular onChange with null/empty array.

options

options: DropdownOption[]

List of dropdown options.

Optionalrequired

required?: boolean

If field is required.

OptionalselectedColor

selectedColor?:
    | "primary"
    | "blue5"
    | "white"
    | "textFaded"
    | "navigation"
    | "navigationTop"
    | "navigationSide"
    | "background"
    | "drawer"
    | "cards"
    | "cardDivider"
    | "cardSectionSeparator"
    | "fieldsOnCard"
    | "fieldsFloating"
    | "buttonSecondary"
    | "iconsDisabled"
    | "red"
    | "orange"
    | "greenDark"
    | "greenLight"
    | "text"
    | "redDark"
    | "orangeDark"
    | "greenDark2"
    | "blueDark"
    | "lineColor"
    | "iconButtonBg"

Optional color for the selected label text.

Optionalsize

size?: "small" | "medium"

Size of the input (small or medium).

OptionalstartLabel

startLabel?: ReactNode

A label to render before the field (outside the input).

OptionaluseAllAsDefault

useAllAsDefault?: boolean

If true, adds an "All" option and makes it the default selection in multi-select mode.

Optionalvalue

value?: null | string | string[] | DropdownOption | DropdownOption[]

Controlled value for the input.

Optionalwidth

width?: string | number

Sets the width of the autocomplete container. If "fullwidth", takes 100%.

Settings

Member Visibility

On This Page

Properties