Info alert:Beta feature
This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.
Examples
Advanced
The search input component can be used to dynamically build a one to one attribute-value advanced search.
Using the attributes prop alongside the advancedSearchDelimiter will expose this functionality, as demonstrated in
the following example. The search input component can also be used as a composable component and paired with a Popper
or other elements to build a completely custom advanced search form. This feature is demonstrated
in the search input's react demos.
Props
SearchInput
| Name | Type | Default | Description |
|---|---|---|---|
| advancedSearchDelimiter | string | Delimiter in the query string for pairing attributes with search values. Required whenever attributes are passed as props | |
| appendTo | HTMLElement | (() => HTMLElement) | 'inline' | The container to append the menu to. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: appendTo={() => document.body} appendTo={document.getElementById('target')} | |
| aria-label | string | An accessible label for the search input | |
| attributes | string[] | SearchAttribute[] | Array of attribute values used for dynamically generated advanced search | |
| className | string | Additional classes added to the banner | |
| formAdditionalItems | React.ReactNode | ||
| hasWordsAttrLabel | React.ReactNode | Attribute label for strings unassociated with one of the provided listed attributes | |
| hint | string | A suggestion for autocompleting | |
| isAdvancedSearchOpen | boolean | A flag for controlling the open state of a custom advanced search implementation | |
| isDisabled | boolean | Flag indicating if search input is disabled | |
| isNextNavigationButtonDisabled | boolean | Flag indicating if the next navigation button is disabled | |
| isPreviousNavigationButtonDisabled | boolean | Flag indicating if the previous navigation button is disabled | |
| nextNavigationButtonAriaLabel | string | Label for the button to navigate to next result | |
| onChange | (value: string, event: React.FormEvent<HTMLInputElement>) => void | A callback for when the input value changes | |
| onClear | (event: React.SyntheticEvent<HTMLButtonElement>) => void | A callback for when the user clicks the clear button | |
| onNextClick | (event: React.SyntheticEvent<HTMLButtonElement>) => void | Function called when user clicks to navigate to next result | |
| onPreviousClick | (event: React.SyntheticEvent<HTMLButtonElement>) => void | Function called when user clicks to navigate to previous result | |
| onSearch | ( value: string, event: React.SyntheticEvent<HTMLButtonElement>, attrValueMap: { [key: string]: string } ) => void | A callback for when the search button clicked changes | |
| onToggleAdvancedSearch | (event: React.SyntheticEvent<HTMLButtonElement>, isOpen?: boolean) => void | A callback for when the open advanced search button is clicked | |
| openMenuButtonAriaLabel | string | Label for the button which opens the advanced search form menu | |
| placeholder | string | placeholder text of the search input | |
| previousNavigationButtonAriaLabel | string | Label for the button to navigate to previous result | |
| resetButtonLabel | string | Label for the buttons which reset the advanced search form and clear the search input | |
| resultsCount | number | string | The number of search results returned. Either a total number of results, or a string representing the current result over the total number of results. i.e. "1 / 5" | |
| submitSearchButtonLabel | string | Label for the buttons which called the onSearch event handler | |
| value | string | Value of the search input |
SearchAttribute
| Name | Type | Default | Description |
|---|---|---|---|
| attrrequired | string | The search attribute's value to be provided in the search input's query string. It should have no spaces and be unique for every attribute | |
| displayrequired | React.ReactNode | The search attribute's display name. It is used to label the field in the advanced search menu |
CSS variables
| .pf-c-search-input | --pf-c-search-input__text--before--BorderWidth | 1px | ||
| .pf-c-search-input | --pf-c-search-input__text--before--BorderColor | #f0f0f0 | ||
| .pf-c-search-input | --pf-c-search-input__text--after--BorderBottomWidth | 1px | ||
| .pf-c-search-input | --pf-c-search-input__text--after--BorderBottomColor | #8a8d90 | ||
| .pf-c-search-input | --pf-c-search-input__bar--hover__text--after--BorderBottomColor | #06c | ||
| .pf-c-search-input | --pf-c-search-input__text--focus-within--after--BorderBottomWidth | 2px | ||
| .pf-c-search-input | --pf-c-search-input__text--focus-within--after--BorderBottomColor | #06c | ||
| .pf-c-search-input | --pf-c-search-input__text-input--PaddingTop | 0.375rem | ||
| .pf-c-search-input | --pf-c-search-input__text-input--PaddingRight | 0.5rem | ||
| .pf-c-search-input | --pf-c-search-input__text-input--PaddingBottom | 0.375rem | ||
| .pf-c-search-input | --pf-c-search-input__text-input--PaddingLeft | 2rem | ||
| .pf-c-search-input | --pf-c-search-input__text-input--MinWidth | 6ch | ||
| .pf-c-search-input | --pf-c-search-input__text-input--m-hint--Color | #6a6e73 | ||
| .pf-c-search-input | --pf-c-search-input__icon--Left | 0.5rem | ||
| .pf-c-search-input | --pf-c-search-input__icon--Color | #6a6e73 | ||
| .pf-c-search-input | --pf-c-search-input__text--hover__icon--Color | #151515 | ||
| .pf-c-search-input | --pf-c-search-input__icon--TranslateY | -50% | ||
| .pf-c-search-input | --pf-c-search-input__utilities--MarginRight | 0.5rem | ||
| .pf-c-search-input | --pf-c-search-input__utilities--MarginLeft | 0.25rem | ||
| .pf-c-search-input | --pf-c-search-input__utilities--child--MarginLeft | 0.25rem | ||
| .pf-c-search-input | --pf-c-search-input__utilities--c-button--PaddingRight | 0.25rem | ||
| .pf-c-search-input | --pf-c-search-input__utilities--c-button--PaddingLeft | 0.25rem | ||
| .pf-c-search-input | --pf-c-search-input__menu-body--PaddingTop | 1rem | ||
| .pf-c-search-input | --pf-c-search-input__menu-body--PaddingRight | 1rem | ||
| .pf-c-search-input | --pf-c-search-input__menu-body--PaddingBottom | 1rem | ||
| .pf-c-search-input | --pf-c-search-input__menu-body--PaddingLeft | 1rem | ||
| .pf-c-search-input | --pf-c-search-input__menu--BackgroundColor | #fff | ||
| .pf-c-search-input | --pf-c-search-input__menu--BoxShadow | 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||
| .pf-c-search-input | --pf-c-search-input__menu--Top | calc(100% + 0.25rem) | ||
| .pf-c-search-input | --pf-c-search-input__menu--ZIndex | 200 | ||
| .pf-c-search-input | --pf-c-search-input--m-top__menu--Top | 0 | ||
| .pf-c-search-input | --pf-c-search-input--m-top__menu--TranslateY | calc(-100% - 0.25rem) | ||
| .pf-c-search-input | --pf-c-search-input__menu-list--PaddingTop | 0.5rem | ||
| .pf-c-search-input | --pf-c-search-input__menu-list--PaddingBottom | 0.5rem | ||
| .pf-c-search-input | --pf-c-search-input__menu-item--PaddingTop | 0.5rem | ||
| .pf-c-search-input | --pf-c-search-input__menu-item--PaddingRight | 1rem | ||
| .pf-c-search-input | --pf-c-search-input__menu-item--PaddingBottom | 0.5rem | ||
| .pf-c-search-input | --pf-c-search-input__menu-item--PaddingLeft | 1rem | ||
| .pf-c-search-input | --pf-c-search-input__menu-item--Color | #151515 | ||
| .pf-c-search-input | --pf-c-search-input__menu-item--BackgroundColor | transparent | ||
| .pf-c-search-input | --pf-c-search-input__menu-item--hover--BackgroundColor | #f0f0f0 | ||
| .pf-c-search-input | --pf-c-search-input__menu-item--focus--BackgroundColor | #f0f0f0 | ||
| .pf-c-search-input__bar:hover | --pf-c-search-input__text--after--BorderBottomColor | #06c | ||
| .pf-c-search-input__text:hover | --pf-c-search-input__icon--Color | #151515 | ||
| .pf-c-search-input__text:focus-within | --pf-c-search-input__text--after--BorderBottomWidth | 2px | ||
| .pf-c-search-input__text:focus-within | --pf-c-search-input__text--after--BorderBottomColor | #06c | ||
| .pf-c-search-input__utilities .pf-c-button | --pf-c-button--PaddingRight | 0.25rem | ||
| .pf-c-search-input__utilities .pf-c-button | --pf-c-button--PaddingLeft | 0.25rem | ||
| .pf-c-search-input.pf-m-top .pf-c-search-input__menu | --pf-c-search-input__menu--Top | 0 | ||
| .pf-c-search-input__menu-item:hover | --pf-c-search-input__menu-item--BackgroundColor | #f0f0f0 | ||
| .pf-c-search-input__menu-item:focus | --pf-c-search-input__menu-item--BackgroundColor | #f0f0f0 | ||
View source on GitHub
