Skip to main content Primer

InlineAutocomplete

Shows suggestions to complete the current word/phrase the user is actively typing.

React

draft

Docs|Storybook|Source

Props

InlineAutocomplete

Name	Default	Description
triggers Required		`Trigger[]` Register the triggers that can cause suggestions to appear.
onShowSuggestions Required		`(event: ShowSuggestionsEvent) => void` Called when a valid suggestion query is updated. This should be handled by setting the `suggestions` prop accordingly.
onSelectSuggestion		`(event: SelectSuggestionsEvent) => void` Called when a suggestion is selected.
onHideSuggestions Required		`() => void` Called when suggestions should be hidden. Set `suggestions` to `null` in this case.
suggestions Required		`Suggestions` The currently visible list of suggestions. If `loading`, a loading indicator will be shown. If `null` or empty, the list will be hidden. Suggestion sort will be preserved. Typically, this should not contain more than five or so suggestions.
tabInsertsSuggestions	`false`	`boolean` If `true`, suggestions will be applied with both `Tab` and `Enter`, instead of just `Enter`. This may be expected behavior for users used to IDEs, but use caution when hijacking browser tabbing capability.
style		`Omit<React.CSSProperties, "position">` The `AutocompleteTextarea` has a container for positioning the suggestions overlay. This can break some layouts (ie, if the editor must expand with `flex: 1` to fill space) so you can override container styles here. Usually this should not be necessary. `position` may not be overridden.
children Required		`TextInputCompatibleChild` An `input` or `textarea` compatible component to extend. A compatible component is any component that forwards a ref and props to an underlying `input` or `textarea` element, including but not limited to `Input`, `TextArea`, `input`, `textarea`, `styled.input`, and `styled.textarea`. If the child is not compatible, a runtime `TypeError` will be thrown.
suggestionsPlacement	`"below"`	`SuggestionsPlacement` Control which side of the insertion point the suggestions list appears on by default. This should almost always be `"below"` because it typically provides a better user experience (the most-relevant suggestions will appear closest to the text). However, if the input is always near the bottom of the screen (ie, a chat composition form), it may be better to display the suggestions above the input. In either case, if there is not enough room to display the suggestions in the default direction, the suggestions will appear in the other direction.
portalName		`string` The name of the portal to render the suggestions overlay into. This is useful if you have multiple inline autocomplete components on the same page and you want to ensure the suggestions overlay is rendered in the correct order.
fullWidth		`boolean` If `true`, the input will be rendered as a block element, taking up the full width of its container. This is useful for rendering the input in a `flex` container, for example.
title		`string` Optional title/name for the suggestions menu.
asMenu		`boolean` For simple cases, the standard representation of this widget is as a `listbox` tied to a `combobox`. For more advanced cases (such as multistep menus or if items need to perform side effects), the widget can instead be represented as a `menu` tied to a plain `textbox`.