Skip to content


Provides inline auto completion suggestions for an input or textarea.
  • Draft
  • Review pending by accessibility team
import {InlineAutocomplete} from '@primer/react/drafts'

The InlineAutocomplete component extends an Input or Textarea component to provide inline suggestions, similar to those provided by a code editor.


Input components must always be accompanied by a corresponding label to improve support for assistive technologies. Examples below are provided for conciseness and may not reflect accessibility best practices.

InlineAutocomplete can be used with the FormControl component to render a corresponding label.

Multi-line input

Try typing a # symbol to see suggestions. Use Enter or click to apply a suggestion.

Single-line input



children Required
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.
triggers Required
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.
onShowSuggestions Required
() => void
Called when suggestions should be hidden. Set `suggestions` to `null` or an empty array in this case.
suggestions Required
Suggestion[] | null | 'loading'
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.
falseIf `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 overrides to apply to the component. See also overriding styles.



  • Component props are documented on
  • Component does not have any unnecessary third-party dependencies.
  • Component can adapt to different themes.
  • Component can adapt to different screen sizes.
  • Component has 100% test coverage.


  • Component is used in a production application.
  • Common usage examples are documented on
  • Common usage examples are documented in storybook stories.
  • Component has been reviewed by a systems designer and any resulting issues have been addressed.
  • Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.


  • Component API has been stable with no breaking changes for at least one month.
  • Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
  • Component has corresponding design guidelines documented in the interface guidelines.
  • Component has corresponding Figma component in the Primer Web library.