InlineAutocomplete

Provides inline auto completion suggestions for an input or textarea.

Draft
Not reviewed for accessibility

On this page

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.

Examples

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.

const options = ['javascript', 'typescript', 'css', 'html', 'webassembly']

const SimpleExample = () => {
  const [suggestions, setSuggestions] = React.useState([])

  return (
    <InlineAutocomplete
      triggers={[{triggerChar: '#'}]}
      suggestions={suggestions}
      onShowSuggestions={({query}) => setSuggestions(options.filter(tag => tag.includes(query)))}
      onHideSuggestions={() => setSuggestions([])}
    >
      <Textarea />
    </InlineAutocomplete>
  )
}

render(SimpleExample)

const options = ['javascript', 'typescript', 'css', 'html', 'webassembly']

const SimpleExample = () => {
  const [suggestions, setSuggestions] = React.useState([])

  return (
    <InlineAutocomplete
      triggers={[{triggerChar: '#'}]}
      suggestions={suggestions}
      onShowSuggestions={({query}) => setSuggestions(options.filter(tag => tag.includes(query)))}
      onHideSuggestions={() => setSuggestions([])}
    >
      <Textarea />
    </InlineAutocomplete>
  )
}

render(SimpleExample)

Single-line input

const options = ['javascript', 'typescript', 'css', 'html', 'webassembly']

const SimpleExample = () => {
  const [suggestions, setSuggestions] = React.useState([])

  return (
    <InlineAutocomplete
      triggers={[{triggerChar: '#'}]}
      suggestions={suggestions}
      onShowSuggestions={({query}) => setSuggestions(options.filter(tag => tag.includes(query)))}
      onHideSuggestions={() => setSuggestions([])}
    >
      <TextInput />
    </InlineAutocomplete>
  )
}

render(SimpleExample)

const options = ['javascript', 'typescript', 'css', 'html', 'webassembly']

const SimpleExample = () => {
  const [suggestions, setSuggestions] = React.useState([])

  return (
    <InlineAutocomplete
      triggers={[{triggerChar: '#'}]}
      suggestions={suggestions}
      onShowSuggestions={({query}) => setSuggestions(options.filter(tag => tag.includes(query)))}
      onHideSuggestions={() => setSuggestions([])}
    >
      <TextInput />
    </InlineAutocomplete>
  )
}

render(SimpleExample)

Labelled

const options = ['javascript', 'typescript', 'css', 'html', 'webassembly']

const SimpleExample = () => {
  const [suggestions, setSuggestions] = React.useState([])

  return (
    <FormControl>
      <FormControl.Label>Example</FormControl.Label>
      <InlineAutocomplete
        triggers={[{triggerChar: '#'}]}
        suggestions={suggestions}
        onShowSuggestions={({query}) => setSuggestions(options.filter(tag => tag.includes(query)))}
        onHideSuggestions={() => setSuggestions([])}
      >
        <Textarea />
      </InlineAutocomplete>
    </FormControl>
  )
}

render(SimpleExample)

const options = ['javascript', 'typescript', 'css', 'html', 'webassembly']

const SimpleExample = () => {
  const [suggestions, setSuggestions] = React.useState([])

  return (
    <FormControl>
      <FormControl.Label>Example</FormControl.Label>
      <InlineAutocomplete
        triggers={[{triggerChar: '#'}]}
        suggestions={suggestions}
        onShowSuggestions={({query}) => setSuggestions(options.filter(tag => tag.includes(query)))}
        onHideSuggestions={() => setSuggestions([])}
      >
        <Textarea />
      </InlineAutocomplete>
    </FormControl>
  )
}

render(SimpleExample)

Props