Dropdown
The use of dropdowns has its advantages but it depends on the screen support. Dropdowns are a standard widget, so the users know how to interact with them. The options available in a dropdown component are static, preventing erroneous data entered by the user since it only shows a range of correct values for that input.
Name | Type | Description | Default |
---|---|---|---|
Required options | { label?: string; icon?: string | (React.ReactNode & React.SVGProps <SVGSVGElement>); value: string }[] | An array of objects representing the options. Each object has the following properties:
| - |
optionsIconPosition | 'before' | 'after' | In case options include icons, whether the icon should appear after or before the label. | 'before' |
icon | string | (React.ReactNode & React.SVGProps <SVGSVGElement>) | Element or path used as the icon that will be placed next to the dropdown label. | - |
iconPosition | 'before' | 'after' | Whether the icon should appear after or before the label. | 'before' |
label | string | Text to be placed within the dropdown. | - |
caretHidden | boolean | Whether the arrow next to the label must be displayed or not. | false |
disabled | boolean | If true, the component will be disabled. | false |
expandOnHover | boolean | If true, the options are showed when the dropdown is hovered. | false |
Required onSelectOption | (value: string) => void | This function will be called every time the selection changes. The value of the selected option will be passed as a parameter. | - |
margin | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin | Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | - |
size | 'small' | 'medium' | 'large' | 'fillParent' | 'fitContent' | Size of the component. | 'fitContent' |
tabIndex | number | Value of the tabindex attribute. | 0 |