Search

Examples

A responsive search control.

Properties

defaultValue {string}
What text to start with in the input.
dropAlign {left: left|right, right: left|right, top: top|bottom, bottom: top|bottom}
Where to place the drop down. At most one of left or right and one of top or bottom should be specified.
fill true|false
Indicates whether an inline search input should take up the full width of its parent container or not. Defaults to false.
iconAlign start|end
Whether the search icon should align with the start or end of the input field. Defaults to end.
inline true|false
Indicates that the search input should always be visible.
onDOMChange {function (event)}
Function that will be called when the user types in the input.
onSelect {function ({target: , suggestion: }, selected)}
Function that will be called when the user selects a suggestion. The target corresponds to the embedded input element , allowing you to distinguish which component triggered the event . The suggestion contains the object chosen from the supplied suggestions. selected will be true when the user has chosen one of the suggestions, and false when the user presses enter after entering text (without selecting a suggestion).
placeHolder {string}
Placeholder text to use when the input is empty.
responsive true|false
Whether the search control is responsive (turns off inline search option for small screen sizes). If responsive is false, large inputs will shrink to the default inline size for smaller screens (instead of reverting to the search control button by default). Defaults to true.
size small|medium|large
The size of the inline search input. Defaults to medium.
suggestions [{string}|{label: {string}, ...}, ...]
Suggestions to show, typically based on what the user has typed so far. You can pass an array of strings or objects. Objects must have a label: property but can have any other properties you like. This object will be given to the onSelect() handler if the suggestion is selected.
value {string}
What text to show in the input.