Typeahead

In-app example

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
  • 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
disabledbooleanstandard input disable flagfalse
errorbooleanerror state flagfalse
labelstringidentifying string for input
onChange(Event, nextValue) => voidtriggered when value changes
placeholderstringin-field usage hint
size
medium | small
horizontal icon placement (from Typeahead.sizes)medium
subLabelstringsupporting text or error messaging
valuestringcontrolled value

Typeahead.Suggestion

Name
Type
Description
Default
childrenstringsuggestion label
valuestringsuggestion value (optional, falls back to label)