Typeahead

In-app example

Level

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

Appearance

For a more subtle look, use subtle appearance. So subtle.

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

Size

The small typeahead is ideal for usage within table rows otherwise use the default, medium size typeahead, in forms for 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

Usage & types

Version
CHANGELOG
Install
npm install @pluralsight/ps-design-system-typeahead
Import
import VerticalTabs from '@pluralsight/ps-design-system-typeahead'

Typeahead

Name	Type	Description	Default
`appearance`	`default \| subtle`	visual style (from Typeahead.appearances)	`default`
`disabled`	`boolean`	standard input disable flag	`false`
`error`	`boolean`	error state flag	`false`
`label`	`string`	identifying string for input
`onChange`	`(Event, nextValue) => void`	triggered when value changes
`placeholder`	`string`	in-field usage hint
`size`	`medium \| small`	horizontal icon placement (from Typeahead.sizes)	`medium`
`subLabel`	`string`	supporting text or error messaging
`value`	`string`	controlled value

Typeahead.Suggestion

Name	Type	Description	Default
`children`	`string`	suggestion label
`value`	`string`	suggestion value (optional, falls back to label)