components
Input Dropdown
v.1.0.0 | SaturnImport
1
import { InputDropdown } from '@kubit-ui-web/react-components';
Props
Let's delve into the versatility of the inputDropdown component by examining all its avalaible props.
| Property | Type | Default | Description |
|---|---|---|---|
variant Required | String | - | Variant of InputDropdown |
optionList Required | InputDropdownOptionsType | - | List of options to show |
| inputVariant | String | - | Set the Input's variant |
| open | Boolean | false | Indicates if inputDropdown is open |
| disabled | Boolean | - | Specifies if the input element is disabled |
| error | Boolean | - | Specifies if the input element has error |
| onClick | (event: MouseEvent or KeyboardEvent) => void | - | Function that is called when user clicks on input |
| onChange | InputDropdownOnChangeType | - | Function that is called when selecting an element on the component |
| onInputPopoverIconClick | () => void | - | Function that is called when click on the input icon in the ActionBottomSheet |
| onOpenCloseOptions | (open: boolean) => void | - | Function that is called when the options are opened or closed |
| onInternalErrors | (errors: string) => void | - | Function that is called when an internal error occurs |
| internalErrorExecution | INTERNAL_ERROR_EXECUTION | onChangeOnBlur | When error handling |
| value | String | - | Option value selected |
| loadingList | Boolean | - | Add loading in result list when database does not find results |
| loadingText | InputDropdownLoadingTextType | - | Text for loading result list |
| elementsToShow | Number | 4 | Number of elements to show |
| noResultsText | InputDropdownNoResultTextType | - | Message to display when results are empty |
| closeIcon | IElementOrIcon | - | Add close icon |
| hasResultTextWrittenByUser | Boolean | true | Show the search option in the list |
| hasInputInSearchList | Boolean | - | Show the input in the list |
| labelComponentType | TextComponentType | H5 | Component of the label for the actionBottomSheet |
| ariaLabelClose | String | - | Aria label of the close button in ActionBottomSheet |
| inputPopoverIcon | IElementOrIcon | - | Set icon of the input icon in the ActionBottomSheet |
| inputPopoverVariant | String | - | Variant for the input inside the popover |
| onCloseIconTabletMobileClick | String | - | Function called when in mobile or tablet close icon is clicked |
| ctv | InputDropdownStylesProps | - | Modify styles for the default version of the component |
- And extends Input Controlled Props except variant, styles, inputId, error, disabled, textCounter, locale
Initialized extended props
| Property | Type | Default | Description |
|---|---|---|---|
| type | String | Text | The type attribute specifies the type of input element to display. If the type attribute is not specified, the default type is text" |