'%3e%3cpath%20d='M19%2028.5C19%2025.9804%2020.0009%2023.5641%2021.7825%2021.7825C23.5641%2020.0009%2025.9804%2019%2028.5%2019C31.0196%2019%2033.4359%2020.0009%2035.2175%2021.7825C36.9991%2023.5641%2038%2025.9804%2038%2028.5C38%2031.0196%2036.9991%2033.4359%2035.2175%2035.2175C33.4359%2036.9991%2031.0196%2038%2028.5%2038C25.9804%2038%2023.5641%2036.9991%2021.7825%2035.2175C20.0009%2033.4359%2019%2031.0196%2019%2028.5Z'%20fill='%231ABCFE'/%3e%3cpath%20d='M0%2047.5C0%2044.9804%201.00089%2042.5641%202.78249%2040.7825C4.56408%2039.0009%206.98044%2038%209.5%2038H19V47.5C19%2050.0196%2017.9991%2052.4359%2016.2175%2054.2175C14.4359%2055.9991%2012.0196%2057%209.5%2057C6.98044%2057%204.56408%2055.9991%202.78249%2054.2175C1.00089%2052.4359%200%2050.0196%200%2047.5H0Z'%20fill='%230ACF83'/%3e%3cpath%20d='M19%200V19H28.5C31.0196%2019%2033.4359%2017.9991%2035.2175%2016.2175C36.9991%2014.4359%2038%2012.0196%2038%209.5C38%206.98044%2036.9991%204.56408%2035.2175%202.78249C33.4359%201.00089%2031.0196%200%2028.5%200L19%200Z'%20fill='%23FF7262'/%3e%3cpath%20d='M0%209.5C0%2012.0196%201.00089%2014.4359%202.78249%2016.2175C4.56408%2017.9991%206.98044%2019%209.5%2019H19V0H9.5C6.98044%200%204.56408%201.00089%202.78249%202.78249C1.00089%204.56408%200%206.98044%200%209.5H0Z'%20fill='%23F24E1E'/%3e%3cpath%20d='M0%2028.5C0%2031.0196%201.00089%2033.4359%202.78249%2035.2175C4.56408%2036.9991%206.98044%2038%209.5%2038H19V19H9.5C6.98044%2019%204.56408%2020.0009%202.78249%2021.7825C1.00089%2023.5641%200%2025.9804%200%2028.5H0Z'%20fill='%23A259FF'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1_137'%3e%3crect%20width='38'%20height='57'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e){kind=icon}
Search provides the ability to narrow down data using a specialized TextField.
Importing
The component can be imported via:
Usage
Search Trigger Options
By default, the PlumaSearch component will not trigger a search. You can enable search actions with the following options:
shouldSearchOnBlur(boolean): Triggers a search when the input loses focus. Defaults tofalse.shouldSearchOnDebounce(number): Triggers a search after the specified debounce interval (in milliseconds). Must be greater than0to enable. Defaults to0.shouldSearchOnInput(boolean): Triggers a search whenever the input value changes. Defaults tofalse.shouldSearchOnEnter(boolean): Triggers a search when theEnterkey is pressed. Defaults tofalse.shouldSearchOnClear(boolean): Triggers a search when the input is cleared via the clear button. Defaults tofalse.
For server-side search, you should use shouldSearchOnEnter and shouldSearchOnClear. Check with the back-end team and, if there is not a performance concern with extra queries, consider using shouldSearchOnDebounce for a better user experience.
For client-side search, you should use shouldSearchOnInput and shouldSearchOnClear. If it is a large dataset, consider using shouldSearchOnDebounce for a better user experience.
Accessibility
The PlumaSearch component inherits accessibility features from the TextField component, including teh requirement for ariaLabel, label, or ariaLabelledby.
Errors
The PlumaSearch component accepts an isInvalid prop, which will render the input in an error state:
It is also highly recommended to provide an error message when the input is
invalid. This will render below the input:
Icons
While you can set the icon, the search icon is used by default and should not be overridden without a very good reason from a designer.
Customizing labels
If a string label is not sufficient, a component can be used to render the label.
In React, the label prop accepts any ReactNode.
Customizing descriptions
If a string description is not sufficient, a component can be used to render the description.
In React, the description prop accepts any ReactNode.
Customizing errors
If a string error is not sufficient, a component can be used to render the error.
In React, the error prop accepts any ReactNode.
API
PlumaSearch extends TextField
Default:'input'
What element or component should be rendered.
Additional classes to be applied to the top-level container. This is necessary as an argument in Ember, where we apply splattributes on the "input" itself, which means we can't pass a custom class to the containing element the classic way.
The name of an icon (from Pluma Icons) to be rendered on the left side of the input.
Whether the input should render in an "active" styled state.
Whether the input should show a loading spinner.
The blur event handler for the input element.
The change event handler for the input element.
Called when the clear button is clicked.
The focus event handler for the input element.
The input event handler for the input element.
The function called when the search should be done
Any changes to the value for the search input
Placeholder text to show inside the field.
Whether to search when the search input is blurred.
Whether to search when the clear button is pressed.
Whether to search on a specific debounced interval, must be greater than 0 to trigger a search.
Whether to search when Enter is pressed.
Whether to search when the value changes.
Default:md
The size of the input element.
The type of input that should be rendered. Defaults to text.
Pluma internal property to set a component name used for logging. Only use if building a custom component that wraps this one and need to make it more obvious where errors, for example, come from.
Additional classes to be applied to the div that wraps the input element.
The current value.
Ember only: a modifier to apply on the input's wrapper element.
React only: a ref to the input's wrapper element.