# @leafygreen-ui/search-input

> leafyGreen UI Kit Search Input

Latest version **6.1.4** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @leafygreen-ui/search-input
pnpm add @leafygreen-ui/search-input
yarn add @leafygreen-ui/search-input
bun add @leafygreen-ui/search-input
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 6.1.4 |
| Published | 2026-10-02 |
| First published | 2022-11-11 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 14 |
| Unpacked size | 325.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 274 |
| Maintainers | thesonofthomp, shaneeza, stephl3, aitchpgm, hnevins, _tsck |

## Links

- npm: https://www.npmjs.com/package/@leafygreen-ui/search-input
- Repository: https://github.com/mongodb/leafygreen-ui
- Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/search-input
- Issues: https://jira.mongodb.org/projects/PD/summary
- npm.io page: https://npm.io/package/@leafygreen-ui/search-input

## Dependencies (14)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [polished](https://npm.io/package/polished.md) ^4.2.2
- [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1
- [@leafygreen-ui/a11y](https://npm.io/package/@leafygreen-ui/a11y.md) ^3.0.6
- [@leafygreen-ui/icon](https://npm.io/package/@leafygreen-ui/icon.md) ^14.9.1
- [@leafygreen-ui/hooks](https://npm.io/package/@leafygreen-ui/hooks.md) ^9.3.2
- [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.3
- [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.1
- [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.3
- [@leafygreen-ui/popover](https://npm.io/package/@leafygreen-ui/popover.md) ^14.3.3
- [@leafygreen-ui/typography](https://npm.io/package/@leafygreen-ui/typography.md) ^22.2.5
- [@leafygreen-ui/icon-button](https://npm.io/package/@leafygreen-ui/icon-button.md) ^17.1.6
- [@leafygreen-ui/polymorphic](https://npm.io/package/@leafygreen-ui/polymorphic.md) ^3.1.1
- [@leafygreen-ui/input-option](https://npm.io/package/@leafygreen-ui/input-option.md) ^4.1.6

## Recent versions

- 6.1.4 (latest) — 2026-10-02
- 2.1.3-popover.0 (popover) — 2024-01-16
- 2.0.9 (beta) — 2023-07-26
- 3.0.0-alpha.1 (alpha) — 2023-07-20
- 2.0.6-next.7 (next) — 2023-05-26
- 6.1.3 — 2026-01-21
- 6.1.2 — 2025-11-24
- 6.1.1 — 2025-11-13
- 6.1.0 — 2025-10-31
- 6.0.7 — 2025-10-21
- 6.0.6 — 2025-09-25
- 6.0.5 — 2025-09-10
- 6.0.4 — 2025-09-03
- 6.0.3 — 2025-07-03
- 6.0.2 — 2025-06-30
- … 62 more at https://npm.io/package/@leafygreen-ui/search-input/versions

## README

# Search Input

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/search-input.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/search-input/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/search-input
```

### Yarn

```shell
yarn add @leafygreen-ui/search-input
```

### NPM

```shell
npm install @leafygreen-ui/search-input
```

## Example

```js
import {
  SearchInput,
  SearchResult,
  SearchResultGroup,
} from '@leafygreen-ui/search-input';

<SearchInput
  className={css`
    width: 200px;
  `}
  onChange={() => {
    console.log('SB: Change');
  }}
  aria-label="some label"
>
  <SearchResult
    onClick={() => {
      console.log('SB: Click Apple');
    }}
    description="This is a description"
  >
    Apple
  </SearchResult>
  <SearchResult>Banana</SearchResult>
  <SearchResult as="a" href="#" description="This is a link">
    Carrot
  </SearchResult>
  <SearchResult description="This is a very very long description. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.">
    Dragonfruit
  </SearchResult>
  <SearchResultGroup label="Peppers">
    <SearchResult description="A moderately hot chili pepper used to flavor dishes">
      Cayenne
    </SearchResult>
    <SearchResult>Ghost pepper</SearchResult>
    <SearchResult>Habanero</SearchResult>
    <SearchResult>Jalapeño</SearchResult>
    <SearchResult>Red pepper</SearchResult>
    <SearchResult>Scotch bonnet</SearchResult>
  </SearchResultGroup>
</SearchInput>;
```

## Properties

| Prop              | Type                                   | Description                                                                                          | Default   |
| ----------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------- | --------- |
| `darkMode`        | `boolean`                              | Determines whether or not the component appears in dark theme.                                       | `false`   |
| `state`           | `'none'`, `'loading'`,                 | The current state of the SearchInput.                                                                | `none`    |
| `size`            | `'small'`, `'default'`, `'large'`      | Determines the font size, padding and spacing.                                                       | `default` |
| `disabled`        | `boolean`                              | Determines whether the field is currently disabled.                                                  | `false`   |
| `value`           | `string`                               | The current value of the text box.                                                                   | `''`      |
| `placeholder`     | `string`                               | The placeholder text shown in the input field before the user begins typing.                         | `Search`  |
| `aria-labelledby` | `string`                               | A value for `aria-labelledby`. Allows use of the component with an external `<label>` element.       |           |
| `aria-label`      | `string`                               | A value for `aria-label`. Allows use of the component without a `label`.                             |           |
| `onChange`        | `ChangeEventHandler<HTMLInputElement>` | Callback fired when the input value changes. Use this callback to filter the `SearchResult` options. |           |
| `onSubmit`        | `FormEventHandler<HTMLFormElement>`    | Callback fired when a search result is clicked, or the enter key is pressed.                         | `''`      |
| `...`             | native `form` attributes               | Any other properties will be spread on the root `form` element.                                      |           |

# SearchResult

## Props

| Prop          | Type                      | Description                                                                                                                                                | Default |
| ------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| `children`    | `React.ReactNode`         | The value of the result.                                                                                                                                   |         |
| `description` | `React.ReactNode`         | Optional description text.                                                                                                                                 |         |
| `onClick`     | `React.MouseEventHandler` | Callback fired when the option is clicked.                                                                                                                 |         |
| `as`          | `React.ElementType`       | The component or element to render as.                                                                                                                     | `li`    |
| `disabled`    | `boolean`                 | Prevents the option from being selectable.                                                                                                                 | `false` |
| `highlighted` | `boolean`                 | Defines the currently highlighted option element for keyboard navigation. Not to be confused with selected, which identifies the currently selected option | `false` |
| `selected`    | `boolean`                 | Whether the component is selected, regardless of keyboard navigation                                                                                       | `false` |
| `href`        | `string`                  | `href` is required for Anchor tags                                                                                                                         |         |
| `...`         | native `as` attributes    | Any other properties will be spread on the root `as` element.                                                                                              |

# SearchResultGroup

## Props

| Prop       | Type                    | Description                                                    | Default |
| ---------- | ----------------------- | -------------------------------------------------------------- | ------- |
| `children` | `React.ReactNode`       | Must be `<SearchResult/>` or `<SearchResultGroup/>`.           |         |
| `label`    | `string`                | Title for the group of options.                                |         |
| `...`      | native `div` attributes | Any other properties will be spread on the root `div` element. |         |

---
_Source: https://npm.io/package/@leafygreen-ui/search-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._