Search Input
Examples
Loading
Replaces the search icon with a loading indicator
import React from 'react'import SearchInput from '@pluralsight/ps-design-system-searchinput'const Comp = () => (<SearchInput loading placeholder="What are you looking for?" />)export default Comp
Clear icon
Providing a onClear
prop will display a close icon.
import React from 'react'import SearchInput from '@pluralsight/ps-design-system-searchinput'const Comp = () => (<SearchInput onClear={() => null} placeholder="Searching for?" />)export default Comp
Guidelines
Exercise consistency and clarity with explicit placeholder text.
Do
Don't
Use consistent theming to encourage visual hierarchy
Do
Don't
Usage & types
- Version
- Install
npm install @pluralsight/ps-design-system-searchinput
- Import
import SearchInput from '@pluralsight/ps-design-system-searchinput'
Name | Type | Description | Default |
---|---|---|---|
label | string | non-standard above-field label |
|
onClear | function | show clear button and trigger when button is clicked |
|
error | boolean | show error state | false |
loading | boolean | show progress indicator | false |
placeholder | string | standard in-field usage hint |
|
subLabel | string | non-standard below-field label or error message |
|