diff --git a/packages/react/src/components/ComboBox/ComboBox.mdx b/packages/react/src/components/ComboBox/ComboBox.mdx index 5f70ed56dbcf..df7dba08a568 100644 --- a/packages/react/src/components/ComboBox/ComboBox.mdx +++ b/packages/react/src/components/ComboBox/ComboBox.mdx @@ -69,6 +69,12 @@ changes. For more information, checkout the Downshift `useCombobox` props [documentation](https://github.com/downshift-js/downshift/tree/v9.0.7/src/hooks/useCombobox#basic-props) +## typeahead Prop + +The `typeahead` prop enables predictive text and autocomplete functionality in the ComboBox. When enabled, it displays inline suggestions as you type, using a built-in prefix-matching filter that ignores the `shouldFilterItem` prop. Pressing `Tab` will complete the input with the first matching suggestion, while arrow keys can still be used to navigate through filtered options. + +When combined with the `allowCustomValue` prop, the ComboBox supports both custom values and typeahead suggestions. + ### Combobox `downshiftActions` The downshift action methods are made available through the `downshiftActions` diff --git a/packages/react/src/components/ComboBox/ComboBox.stories.js b/packages/react/src/components/ComboBox/ComboBox.stories.js index e317db579d74..11c631dae11a 100644 --- a/packages/react/src/components/ComboBox/ComboBox.stories.js +++ b/packages/react/src/components/ComboBox/ComboBox.stories.js @@ -141,7 +141,15 @@ export const AutocompleteWithTypeahead = (args) => { onChange={args.onChange} helperText="Combobox helper text" id="carbon-combobox" - items={['Apple', 'Orange', 'Banana', 'Pineapple', 'Raspberry', 'Lime']} + items={[ + 'Apple', + 'Apricot', + 'Avocado', + 'Banana', + 'Blackberry', + 'Blueberry', + 'Cantaloupe', + ]} titleText="ComboBox title" typeahead />