{
  "id": "uilib/components/autocomplete",
  "name": "Autocomplete",
  "description": "The Autocomplete component, also know as a ComboBox, completes / suggests values during typing.",
  "group": "components",
  "slug": "/uilib/components/autocomplete/",
  "props": [
    {
      "name": "mode",
      "doc": "If set to `async`, it prevents showing the \"no options\" message during typing / filtering. Defaults to `sync`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "input_value",
      "doc": "Lets you define a custom input value. Setting it to an empty string `\"\"` will reset the input value.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "placeholder",
      "doc": "Use this to define the pre-filled placeholder text in the input. Defaults to `title=\"Skriv og velg\"`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "title",
      "doc": "Give a title to let the user know what they have to do. Defaults to `Skriv og få alternativer`.",
      "type": "React.Node",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "disable_filter",
      "doc": "If set to `true`, word highlighting will still be active, but no options will be filtered out. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "disable_highlighting",
      "doc": "If set to `true`, word highlighting will be disabled, but the options will still get filtered. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "disable_reorder",
      "doc": "If set to `true`, reordering of search results will be disabled. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "search_numbers",
      "doc": "If set to `true` and `search_in_word_index` is not set, the user will be able to more easily search and filter e.g. bank account numbers. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "search_in_word_index",
      "doc": "This gives you the possibility to change the threshold number, which defines from what word on we search \"inside words\". Defaults to `3`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "keep_value",
      "doc": "Use `true` to not remove the typed value on input blur, if it is invalid. By default, the typed value will disappear / replaced by a selected value from the data list during the input field blur. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "keep_selection",
      "doc": "Use `true` to not remove selected item on input blur, when the input value is empty. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "keep_value_and_selection",
      "doc": "Like `keep_value` – but would not reset to the selected value during input field blur. Also, the selected value would still be kept. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "prevent_selection",
      "doc": "If set to `true`, no permanent selection will be made. Also, the typed value will not disappear on input blur (like `keep_value`). Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "show_clear_button",
      "doc": "If set to `true`, a clear button is shown inside the input field. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "icon",
      "doc": "To be included in the autocomplete input.",
      "type": [
        "string",
        "React.Node"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "icon_size",
      "doc": "Change the size of the icon pragmatically.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "icon_position",
      "doc": "Position of the icon inside the autocomplete. Set to `left` or `right`. Defaults to `left`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "input_icon",
      "doc": "Same as `icon`.",
      "type": [
        "string",
        "React.Node"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "triangle_position",
      "doc": "Position of icon arrow / triangle the drawer. Set to `left` or `right`. Defaults to `left`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "size",
      "doc": "Define the height of the Autocomplete. Can be set to `small`, `default`, `medium` and `large`. Defaults to `default`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "drawer_class",
      "doc": "Define a custom class for the internal drawer-list. This makes it possible more easily customize the drawer-list style with styled-components and the `css` style method. Defaults to `null`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "show_submit_button",
      "doc": "Use `true` to show a Autocomplete button to toggle the [DrawerList](/uilib/components/fragments/drawer-list). Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "align_autocomplete",
      "doc": "Use `right` to change the options alignment direction. Defaults to `left`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "no_options",
      "doc": "Text show in the \"no options\" item. If set to `false`, the list will not be rendered when there are no options available. Defaults to `Ingen alternativer`.",
      "type": "React.Node",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "aria_live_options",
      "doc": "Text read out by screen readers. This way users with screen readers know how many options they got during typing. Defaults to `%s alternativer`.",
      "type": "React.Node",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "show_all",
      "doc": "Text that lets a user unravel all the available options. Defaults to `Vis alt`.",
      "type": "React.Node",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "indicator_label",
      "doc": "Text show on indicator \"options\" item. Defaults to `Henter data ...`.",
      "type": "React.Node",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "show_options_sr",
      "doc": "Only for screen readers. Title of the button to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "selected_sr",
      "doc": "Only for screen readers (VoiceOver). The label used to announce the selected item. Defaults to `Valgt:`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "selectall",
      "doc": "If set to `true`, then the whole input value gets selected on the entry focus. A second click will place the cursor on the wanted position.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "submit_button_title",
      "doc": "Title on submit button. Defaults to `Vis alternativer`.",
      "type": "React.Node",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "submit_button_icon",
      "doc": "The icon used in the submit button. Defaults to `chevron_down`.",
      "type": [
        "string",
        "React.Element"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "submit_element",
      "doc": "Replace the dropdown / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from '@dnb/eufemia/components/input/Input'`.",
      "type": "React.Node",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "opened",
      "doc": "If set to `true`, the Autocomplete will be rendered initially with a visible and accessible data list / options.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "open_on_focus",
      "doc": "Use `true` to auto open the list once the user is entering the input field with the keyboard.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "stretch",
      "doc": "If set to `true`, then the autocomplete will be 100% in available `width`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "skip_portal",
      "doc": "Set to `true` to disable the React Portal behavior. Defaults to `false`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "status",
      "doc": "Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.",
      "type": [
        "error",
        "info",
        "boolean"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "status_state",
      "doc": "Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.",
      "type": [
        "error",
        "info"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "status_props",
      "doc": "Use an object to define additional FormStatus properties.",
      "type": "object",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "globalStatus",
      "doc": "The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).",
      "type": "object",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "label",
      "doc": "Prepends the Form Label component. If no ID is provided, a random ID is created.",
      "type": "React.Node",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "label_direction",
      "doc": "Use `label_direction=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.",
      "type": "React.Node",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "label_sr_only",
      "doc": "Use `true` to make the label only readable by screen readers.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "suffix",
      "doc": "Text describing the content of the Autocomplete more than the label. You can also send in a React component, so it gets wrapped inside the Autocomplete component.",
      "type": "React.Node",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "skeleton",
      "doc": "If set to `true`, an overlaying skeleton with animation will be shown.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "input_ref",
      "doc": "Use a React.Ref to get access to the `input` DOM element.",
      "type": "React.RefObject",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "input_element",
      "doc": "Lets you provide a custom React element as the input HTML element.",
      "type": [
        "string",
        "React.Element"
      ],
      "status": "optional",
      "defaultValue": null
    }
  ],
  "events": [
    {
      "name": "on_type",
      "doc": "Will be called for every key change the users makes. Returns an object with the input `value` inside `{ value, event, attributes }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data)",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "on_focus",
      "doc": "Will be called on user generated focus action. Returns an object with the input `value` inside `{ value, event, attributes }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data).",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "on_blur",
      "doc": "Will be called on user generated blur action. Returns an object with the input `value` inside `{ value, event, attributes }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data).",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "on_change",
      "doc": "Will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data).",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "on_select",
      "doc": "Will be called once the users focuses or selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data). The \"active_item\" property is the currently selected item by keyboard navigation",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "on_show",
      "doc": "Will be called once the user presses the autocomplete. Returns the data item `{ data, attributes }`.",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "on_hide",
      "doc": "Will be called once the user presses the autocomplete again, or clicks somewhere else. Returns the data item `{ data, attributes }`.",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "onClear",
      "doc": "Will be called on a clear button click. Returns `{ value, previousValue, event }`.",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    }
  ],
  "related": [
    "DrawerList",
    "Space"
  ],
  "checksum": "234f1713e34f0eda0f2b8e6239ed711479d3971aff39e4f9f8dec6dc38e89873",
  "source": {
    "repo": "https://github.com/dnbexperience/eufemia",
    "file": "packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js",
    "permalink": "https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js"
  },
  "sources": {
    "entry": {
      "local": "src/docs/uilib/components/autocomplete.mdx",
      "public": "https://7054fffd.eufemia-e25.pages.dev/uilib/components/autocomplete/"
    },
    "props": {
      "local": "src/docs/uilib/components/autocomplete/properties.mdx",
      "public": "https://7054fffd.eufemia-e25.pages.dev/uilib/components/autocomplete/properties/"
    },
    "events": {
      "local": "src/docs/uilib/components/autocomplete/events.mdx",
      "public": "https://7054fffd.eufemia-e25.pages.dev/uilib/components/autocomplete/events/"
    },
    "demos": {
      "local": "src/docs/uilib/components/autocomplete/demos.mdx",
      "public": "https://7054fffd.eufemia-e25.pages.dev/uilib/components/autocomplete/demos/"
    }
  },
  "version": "0.0.0-development",
  "generatedAt": "2025-12-18T10:03:59.698Z",
  "schemaVersion": 1
}