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 = () => {
const [value, setValue] = React.useState('')
return <SearchInput onClear={() => setValue('')} placeholder="Searching for?" />
}
export default Comp

enterKeyHint

Virtual keyboards can change the label of the enter key. That label should match the functionality intended when the Enter key is pressed. Most of the time, the Enter key just means "enter". Sometimes it can mean "done" or "go" or one of the other enumerated values.

If the enterKeyHint prop is not specified, the browser will try to make its best guess. This is one reason that SearchInput doesn't specify a default. The other is that the Design System tries to avoid determining semantics.

Some users have gotten TypeScript errors related to enterKeyHint. If you do, specify the prop based on the context of your application. You should not see an error since the changes to the @types/[email protected].

import React from 'react'
import SearchInput from '@pluralsight/ps-design-system-searchinput'
const Comp = () => (
<SearchInput enterKeyHint="search" placeholder="Search and press enter to be taken to the search results" />
)
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
labelstringnon-standard above-field label
onClearfunctionshow clear button and trigger when button is clicked
errorbooleanshow error statefalse
loadingbooleanshow progress indicatorfalse
placeholderstringstandard in-field usage hint
subLabelstringnon-standard below-field label or error message