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
    CHANGELOG
  • 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