Search Input

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
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
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
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. | |