components
Input Search
v.1.0.0 | SaturnUsage
import { InputSearch } from '@kubit-ui-web/react-components'
12345678910
<InputSearch
variant="ALTERNATIVE"
label={{ content: 'Label' }}
placeholder='Placeholder'
hasResultTextWrittenByUser={false}
disableErrorInvalidOption={true}
optionList={[
{
options: ['Street 1', 'Street 2', 'Avenue 1'],
},Props
Let's delve into the versatility of the inputSearch component by examining all its avalaible props.
| Property | Type | Default | Description |
|---|---|---|---|
variant Required | String | - | Variant of InputSearch |
optionList Required | IOptionGroup | - | List of options to show |
| inputVariant | String | - | Set the Input's variant |
| open | Boolean | false | Indicates if inputSearch is open or not |
| disabled | Boolean | - | Specifies if the input element is disabled or not |
| internalErrorExecution | INTERNAL_ERROR_EXECUTION | onChangeOnBlur | When error handling |
| error | Boolean | - | Specifies if the input element has error or not |
| searchFilterConfig | SearchFilterConfig | - | Config about the search filter |
| disableErrorInvalidOption | Boolean | - | It disables the INVALID_OPTION error |
| regex | String | - | Custom regex for input search |
| onClick | (event: MouseEvent) => void | - | Function that is called when user clicks on input |
| clearTextInputPopoverIconClick | Boolean | true | It indicates if click on the icon of the input in the ActionBottomSheet clears the input value |
| onChange | (event: ChangeEvent) => void | - | Function that is called when writting or selecting an element on the component |
| onInputPopoverIconClick | () => void | - | Function that is called when click on the input icon in the ActionBottomSheet |
| onOptionsListKeyDown | (event: KeyboardEvent) => void | - | Function that is called when navigates with arrows through options list |
| onPopoverOpen | (open: boolean) => void | - | Function that is called when opening or closing the popover |
| onOptionClick | IInputSearchStandAlone | - | Function that is called when an option is clicked |
| value | String | - | Option value selected |
| titleActionBottomSheet | String | - | Title of the ActionBottomSheet |
| loadingList | Boolean | - | Add loading in result list when database does not find results |
| loadingText | String | - | Text for loading result list |
| elementsToShow | Number | 4 | Number of elements to show |
| noResultsText | InputSearchNoResultTextType | - | Message to display when results are empty |
| highlightedOption | String | - | Displays by default a highlighted option above the predefined ones that will disappear if the user enters text in the input. |
| hasResultTextWrittenByUser | Boolean | true | Show or not the search option in the list |
| sublabel | string | - | Message displayed next to the suggested result |
| closeIcon | IElementOrIcon | - | Add close icon |
| icon | IElementOrIcon | - | Add icon to input |
| inputPopoverIcon | IElementOrIcon | - | Set icon of the input icon in the ActionBottomSheet |
| blockBackPopover | Boolean | false | It indicates if what it is behind the popover is blocked |
| executeInternalOpenOptions | Boolean | true | It prevents the call of the handleOpenOptions function, to control whether the options are opened, when the input icon is clicked |
| optionsListDefaultArias | OptionGroupAriasTypes | - | Arias for the options list |
| ctv | InputSearchStylesProps | - | Modify styles for the default version of the component |
- And extends Input Controlled Props except variant, styles, inputId, error, disabled, formatNumber, locale
Initialized extended props
| Property | Type | Default | Description |
|---|---|---|---|
| type | InputTypeType | Text | The type attribute specifies the type of input element to display. If the type attribute is not specified, the default type is text" |