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
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)