Search Input

A text input specific for search.

• Source
• Changelog
• Bundle size
• Figma

• Install
  npm install @pluralsight/ps-design-system-searchinput
• Import
  import SearchInput from '@pluralsight/ps-design-system-searchinput'

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
Click to expand

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?"
    value={value}
    onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
      setValue(evt.target.value)
    }}
  />
}

export default Comp
Click to expand

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
Click to expand

Guidelines

Exercise consistency and clarity with explicit placeholder text.

Use consistent theming to encourage visual hierarchy

Accessibility

WCAG 2.1 AA Compliance

WAI-ARIA Patterns: Search (landmark)

Props