Search

Material Design 3 search bar and search view web components (lit-material-search-bar, lit-material-search-view).

3.2 KB gzipped
@lit-material/search 0.1.0
Renders on the server

Example

Install

npm install @lit-material/search @lit-material/tokens

import "@lit-material/search";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

API

`<lit-material-search-bar>`

Material Design 3 search bar — a pill-shaped text field meant to pair with lit-material-search-view: focusing or clicking this bar is what the view binds to (via its anchor/anchorElement) to open itself, the same way lit-material-tooltip binds to whatever anchor it's given, rather than this component knowing anything about the view itself.

Properties

Property	Attribute	Type	Default	Description
`value`	`value`	`string`	`""`
`placeholder`	`placeholder`	`string`	`"Search"`
`label`	`label`	`string`	`""`	Accessible name for the input, when `placeholder` alone isn't descriptive enough. Falls back to `placeholder`.
`disabled`	`disabled`	`boolean`	`false`

Events

Event	Description
`input`	Fires whenever `value` changes, via typing or the clear button.
`search`	Fires when Enter is pressed in the input.

Slots

Slot	Description
`leading-icon`	Overrides the default magnifying-glass icon (e.g. with a back arrow or a menu icon).
`trailing`	Optional trailing content (an avatar, extra icon buttons…), shown after the clear button.

CSS parts

Part	Description
`search-bar`	The pill container (background, shape, padding).
`input`	The native `<input>`.
`clear-button`	The clear button, only rendered while `value` is non-empty.

`<lit-material-search-view>`

Material Design 3 (docked) search view — a suggestions panel anchored below a lit-material-search-bar, built on the native Popover API (top-layer rendering escapes clipping/overflow ancestors) the same way lit-material-menu builds on it — but popover="manual", not "auto", like lit-material-tooltip/lit-material-snackbar: an auto popover's native light-dismiss hides it the instant it opens here, because the very click that focuses the anchor (and triggers this view's own JS-driven open, below) isn't a native popovertarget invoker relationship the browser recognizes as legitimate — so this view manages its own outside- click and Escape dismissal instead.

Properties

Property	Attribute	Type	Default	Description
`open`	`open`	`boolean`	`false`
`anchor`	`anchor`	`string \| undefined`	none	id of the anchor element (typically a `lit-material-search-bar`) to position against and bind to. See also `anchorElement`.
`anchorElement`	property only	`HTMLElement \| undefined`	none	The element this view is positioned against and bound to.

Events

Event	Description
`close`	Fires after the view closes, for any reason (item activation, `close()`, Escape, or an outside click).

Slots

Slot	Description
default	`lit-material-list-item` elements (or any other content, e.g. an empty-state message).

CSS parts

Part	Description
`view`	The popover surface (background, padding, shape, elevation).

Source on GitHub npm