Search

Ready

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

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

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

Usage

<nbhd-search
  search-value="magic"
  aria-label="Search"
  placeholder="Search"
  surface="none">
</nbhd-search>

Install

npm install @fbin-web/neighborhood-react

Import

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

Usage

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

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

Usage

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

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`	`noneprimarysecondaryinverseinverse-secondary`	`none`	Sets the surface color treatment for the search.
`ariaLabel`	`aria-label`	`string`	`Search`	Accessible name of the search input.
`landmarkLabel`	`landmark-label`	`string`	`Site`	Accessible name of the search landmark, announced as " search".
`clearLabel`	`clear-label`	`string`	`Clear search`	Accessible name of the clear button.
`submitLabel`	`submit-label`	`string`	`Search`	Accessible name of the submit button.
`placeholder`	`placeholder`	`string`	`Search`	The placeholder text for the search input.
`autosuggest`	`autosuggest`	`string`	—	ID of the `nbhd-autosuggest` that shows suggestions for this input. Makes the input a combobox: `aria-expanded` follows the autosuggest, ArrowDown moves into the results, and Escape closes them (a second Escape clears the input). The autosuggest must be in the same document or shadow root.

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.

nbhd-search::part(base) {
  /* your styles */
}

CSS Properties

Set these on nbhd-search or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.

Property	Token	Value	Description
`--nbhd-search-alignItems`	—	`center`	—
`--nbhd-search-button-clear-insetInlineEnd`	`--nbhd-space-12`	`48px`	—
`--nbhd-search-button-fontSize`	`--nbhd-typography-body-fontSize`	`1rem`	—
`--nbhd-search-button-icon-size`	`--nbhd-size-icon-md`	`20px`	—
`--nbhd-search-button-insetBlockStart`	—	`50%`	—
`--nbhd-search-button-minSize`	`--nbhd-size-target-min`	`24px`	Minimum clear/submit target (WCAG 2.5.8); the icon keeps its own size.
`--nbhd-search-button-position`	—	`absolute`	—
`--nbhd-search-button-submit-insetInlineEnd`	`--nbhd-space-3`	`12px`	—
`--nbhd-search-button-transform`	—	`translateY(-50%)`	—
`--nbhd-search-button-zIndex`	`--nbhd-z-1`	`1`	—
`--nbhd-search-display`	—	`flex`	—
`--nbhd-search-input-paddingInline`	`--nbhd-space-3 --nbhd-space-22`	`12px 88px`	—
`--nbhd-search-justifyContent`	—	`center`	—
`--nbhd-search-minInlineSize`	`--nbhd-size-container-min`	`320px`	—
`--nbhd-search-paddingBlock`	`--nbhd-space-2`	`8px`	—
`--nbhd-search-paddingInline`	`--nbhd-space-2`	`8px`	—

Dependencies

Child components <nbhd-search> renders internally. Import them too when you tree-shake.

InputReady <nbhd-input> ButtonReady <nbhd-button>