Typeahead

Typeahead combines a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.

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

Examples

In-app example

import Typeahead from '@pluralsight/ps-design-system-typeahead'
import React from 'react'

const Example: React.FC = props => {
  const options = [{label: 'Beginner', value: 'Beginner'}, {label: 'Intermediate', value: 'Intermediate'}, {label: 'Advanced', value: 'Advanced'}]

  return (
    <Typeahead label="Level" placeholder="Select a Level" options={options}/>
  )
}

export default Example

Sizes

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 options = [{label: 'Beginner', value: 'Beginner'}, {label: 'Intermediate', value: 'Intermediate'}, {label: 'Advanced', value: 'Advanced'}]
const Example: React.FC = props => {
  return (
    <div className="example-grid--col-2">
      <Typeahead placeholder="medium typeahead" options={options}/>
      <Typeahead placeholder="small typeahead" size={Typeahead.sizes.small} options={options}/>
    </div>
  )
}

export default Example

Custom filterFunction

The typeahead allows you to pass in a custom filter function that does not use the default String.includes method

import Typeahead, {TypeaheadFilterFunction} from '@pluralsight/ps-design-system-typeahead'
import React from 'react'

const filterFunction: TypeaheadFilterFunction = (options, inputValue) =>
  options.filter(({ label }) =>
    `${label}`
      .toLowerCase()
      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
      .startsWith((inputValue as string).toLowerCase())

const Example: React.FC = props => {
  const options = [{label: 'Beginner', value: 'Beginner'}, {label: 'Intermediate', value: 'Intermediate'}, {label: 'Advanced', value: 'Advanced'}]

  return (
    <Typeahead label="Level" placeholder="Select a Level" options={options} filterFunction={filterFunction}/>
  )
}

export default Example

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit

WAI-ARIA Patterns: Combobox, Listbox

Props

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`
`filterFunction`	`( options: { label: React.ReactText value: React.ReactText }[], inputValue?: string \| undefined ) => { label: React.ReactText value: React.ReactText }[]`	optional filter function	`string includes`
`label`	`string`	identifying string for input
`onChange`	`(Event, nextValue) => void`	triggered when value changes
`options` Required	`Option[]`
`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