yarn add @leafygreen-ui/search-input
npm install @leafygreen-ui/search-input
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>;
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. |
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. |
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. |