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