search-input

Search Input

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/search-input

NPM

npm install @leafygreen-ui/search-input

Example

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.