Typeahead

import Typeahead from '@pluralsight/ps-design-system-typeahead'
import React from 'react'
const Example: React.FC = props => {
  const options = ['Beginner', 'Intermediate', 'Advanced']
  return (
    <Typeahead label="Level" placeholder="Select a Level">
      {options.map((option, key) => (
        <Typeahead.Suggestion key={key}>{option}</Typeahead.Suggestion>
      ))}
    </Typeahead>
  )
}
export default Example
Click to expand

import Typeahead from '@pluralsight/ps-design-system-typeahead'
import React from 'react'
const Example: React.FC = props => {
  return (
    <Typeahead appearance={Typeahead.appearances.subtle} placeholder="Search" />
  )
}
export default Example

import Typeahead from '@pluralsight/ps-design-system-typeahead'
import React from 'react'
const Example: React.FC = props => {
  return (
    <div className="example-grid--col-2">
      <Typeahead placeholder="medium typeahead" />
      <Typeahead placeholder="small typeahead" size={Typeahead.sizes.small} />
    </div>
  )
}
export default Example