Styled UI Library

Components

Search Filter

A Search Filter allows users to search for specific content.

Examples

link

Default

As the user types, the top results based on the typed letter are shown instantly, allowing users to find what they need without pressing Enter to run a full search. A variety of props are available: data as the only mandatory prop, label, name, placeholder, isRound, searchResultsLabel and hasIcon as optional props.

searchsearch
7 Results found
  • New YorkUSA
  • Sao PauloBrazil
  • New JerseyUSA
  • ParisFrance
  • Hong KongChina
  • San FranciscoUSA
  • MunichGermany
import { SearchFilter } from '@millanbrankovic/styled-ui-library';

// Data example
const data = [
  {
    "title": "New York",
    "content": "USA"
  },
  {
    "title": "Sao Paulo",
    "content": "Brazil"
  },
  {
    "title": "New Yersey",
    "content": "USA"
  },
  {
    "title": "Paris",
    "content": "France"
  },
  {
    "title": "Hong Kong",
    "content": "China"
  },
  {
    "title": "San Francisco",
    "content": "USA"
  },
  {
    "title": "Munich",
    "content": "Germany"
  }
]

function SearchFilterExample() {
  return (
    <SearchFilter 
      data={data}
      label='Search cities'
      name='cities'
      placeholder='Search...'
      isRound
      hasIcon
      searchResultsLabel 
    />
  );
};

export default SearchFilterExample;