Search

Search enables users to specify a word or a phrase to find particularly relevant pieces of content without the use of navigation.

Filter: Filtering can be used as a way to further narrow down content on the page based on the user's search query. Filtering does not replace Ordination.

Best practices

• Use labels to show that the results are being displayed. And present the most relevant results first.
• For searches with many results use the Paging component and indicate how many results were found.
• Display clear messages when no results are found and offer other search suggestions whenever possible.
• Keep the original text in the input field. It facilitates the user's action if he wants to make a new search with some modifications in the input.
• If it is possible to detect a typing error, show the results for the word "corrected", this avoids the frustration of not obtaining results and does not force the user to perform a new search.
• Where appropriate, highlight the search terms in the results.

Example

import { TextField } from '@lemonade/ui'
import React from 'react'

function SearchEx() {
  return (
    <TextField
      name='iconized'
      id='iconized'
      placeholder='Search for anything. Ex: Hercílio Luz'
      icon='zoomOutline'
      required
    />
  )
}

export default SearchEx