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.

Don't

Use consistent theming to encourage visual hierarchy

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