Search | Components | Neighborhood Design System

Selected Brand

Loading

Code

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

<nbhd-search search-value="">
</nbhd-search>

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

const App = () => (
  <>
    <NbhdSearch searchValue=""></NbhdSearch>
  </>
);

Property	Attribute	Type	Default	Description
`searchValue`	`search-value`	`string`		The current value of the search input.
`focused`	`focused`	`boolean`	`false`	Whether the search input should be focused on initialization.
`autofocus`	`autofocus`	`boolean`	`false`	Automatically focuses the search input when the component loads.

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

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.

This component contains the following components as dependencies.