Search
ready

A search input component that allows users to enter and submit search queries.

Usage

  • Search composes an nbhd-input with clear and submit buttons.

Example

icon-storybook-default View Storybook
Loading

Code

HTML 

import { NbhdSearch } from '@fbin-web/neighborhood-core';
<nbhd-search search-value="magic" aria-label="Search Input" placeholder="Search" surface="none">
</nbhd-search>

React 

import { NbhdSearch } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdSearch
      searchValue="magic"
      ariaLabel="Search Input"
      placeholder="Search"
      surface="none"></NbhdSearch>
  </>
);

Properties

Property Attribute Type Default Description
searchValue search-value string The value of the search input.
autofocus autofocus boolean false Whether the search input should automatically receive focus.
surface surface none | primary | secondary | inverse | inverse-secondary none Sets the surface color treatment for the search.
ariaLabel aria-label string Search Input The aria-label for the search input.
placeholder placeholder string Search The placeholder text for the search input.

Events

Name Description Event Detail
nbhd-search-input Emitted when the search input value changes or is cleared. { value: string }
nbhd-search-submit Emitted when the search is submitted via button click or Enter key. { value: string }

CSS Parts

Name Description
base The root search container div.
wrapper The wrapper div containing the input and buttons.
search-input The search input element.
clear-button The button to clear the search input (conditionally rendered).
submit-button The button to submit the search.

Dependencies

This component contains the following components as dependencies.