InputDropdown
This component provides a drop-down list for users to select one or more options. It's useful for saving space while offering a range of choices, like categories, preferences, or settings.
Dropdowns can be searchable, support multi-select, and be grouped for better organization. They're widely used in forms and filters.
Examples
Various examples showcasing different configurations of the component
Examples
Description
Property
Value
Label
Label
Hint
Description
Prefix icon
Search
Placeholder
Select...
Options
[{"label":"A1","value":"A_1"},{"label":"B2","value":"B_2"},{"label":"C3","value":"C_3"}]
Multiselect
Description
Pill
Pill
Helper text
Property
Value
Label
Label
Hint
Description
Prefix icon
Search
Guideline
Helper text
Guideline icon
Info
Multiple
true
Options
[{"label":"A1","value":"A_1"},{"label":"B2","value":"B_2"},{"label":"C3","value":"C_3"}]
Value
["OPTION_1","OPTION_2"]
Placeholder
Select...
Options Configuration
Description
Property
Value
Placeholder
Select...
Label
Label
Hint
Description
Prefix icon
Search
Options
[{"label":"Option 1","value":"OPTION_1"},{"label":"Option 2","value":"OPTION_2","disabled":true},{"label":"Option 3","value":"OPTION_3"}]
Properties
Each component can be customized and configured based on product requirements. You can modify the component on Canonic by clicking on the component and opening the configuration panel.
Header Properties
Property
Description
Default Value
Type
Label
Label for the input.
String
Tooltip
Tooltip to be displayed.
String
Description
Hint text to be displayed.
String
Input Properties
Property
Description
Default Value
Type
Size
The size of the input.
Large
String
Default Value
Default value for the input.
Any
Placeholder
Label for the input.
Type here...
String
Prefix icon
Icon for the prefix.
Icon
Button text
Content to be displayed on the input button.
String
Multiple
Whether multiple options can be selected.
Bool
Footer Properties
Property
Description
Default Value
Type
Guideline
Guideline text to be displayed.
String
Guideline icon
Icon for the guideline.
Icon
Misc Properties
Property
Description
Default Value
Type
Error
Error message to be displayed.
String
Disabled
Whether the input is disabled.
Bool
Validation Properties
Property
Description
Default Value
Type
Required
Whether the input is required.
Bool
Validate on
When to validate the input.
Change
String
Validations
An array of validations to apply to the input.
[]
Array validations
Configuration Properties
Property
Description
Default Value
Type
Options
The options available for selection.
Array
Triggers
Components expose certain events such as clicking. You can use these events to perform actions such as navigation, fetching data and controlling other components. The events exposed by this component are listed below.
Property
Description
On button click
Function to be called when the input button is clicked.
On focus
Function to be called when the input is focused.
On blur
Function to be called when the input loses focus.
On change
Function to be called when the input changes.