Skip to content

Latest commit

 

History

History

search-input

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

Search Input

npm (scoped)

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.