import { Select } from '@duik/it'import Select from '@duik/select'Renders selects effortlesly. The core of the select is Dropdown component which gives you superb control over the UI. Check the examples below of the possibilities.
By default, if you don't provide an "activeOption" prop which represents the value to be displayed, the Select component becomes uncontrolled and stores the active value internaly. You can still pass props such as onOptionClick.
Select is very friendly for your UI. Option label doesn't have to be only text, but it can be a react child as well.
Select offers UI for searchability, however, what happens whit the serached keyword or with the options, that's totally under your control and you should provide this behaviour, as the simple select without data context cannot really predict that.
Multi select is possible as well. To ensure proper behaviour, we are passing multiple prop to the Select component as well as activeOption becomes an array prop instead of an object.
Below you can check an example with controlled value.
You can easily pass props to the items in the option list as well. In the example, we still want to display an option but we don't want it to be selectable.
You might have noticed that the activeOption, or if you would rather call it value, doesn't have a more traditional structure of just being plain string but there is a reason for this.
If you would pass only pure value, the component would have to internally search for the label to be displayed. This wouldn't be a problem at all as you are passing list of options as well, however there are cases where you would want to filter out an option from the options list and the Select component won't be able to find the label for the given value anymore. Passing separate activeOption grants you the ability to do so.
| value | Required: Required |
| type: string | number | |
| Option value |
| label | Required: false |
| type: React.ReactNode | |
| Display value to be rendered on the select button or select option. Value will be used as fallback if not provided. |
| props | Required: false |
| type: props of option component (Button) | |
| You can pass props to the option component as well, such as "disabled" |
| className | Required: false |
| type: string | |
| Passed to the wrapping element Dropdown |
| label | Required: false |
| type: React.ReactNode | |
| Displays label node |
| placeholder | Required: false |
| type: React.ReactNode | default value: "Select Option" |
| Displays placeholder node if there is no activeOption |
| activeOption | Required: false |
| type: SelectOption | SelectOption[] | |
| Active option(s) to be displayed. Single or Array. |
| options | Required: false |
| type: SelectOption[] | |
| Array of options to be displayed in the options list |
| multiple | Required: false |
| type: boolean | |
| Enables behaviour for multiple select. |
| searchable | Required: false |
| type: boolean | |
| Will display search field. |
| name | Required: false |
| type: string | |
| If you need to know on what select the onOptionClick has been triggered, pass a name value. |
| onOptionClick | Required: false |
| type: (option: SelectOption, name?: string) => void | |
| Handler when option is clicked. |
| inputSearchProps | Required: false |
| type: props of TextField | default value: {} |
| Pass props such as value and onChange to have access to the input value. See example usage above. |
| block | Required: false |
| type: boolean | |
| Expands the select button. |
| noWrap | Required: false |
| type: boolean | |
| When multiple elements are rendered, e.g. providing a label, the component will wrap the content with a FormGroup component for mroe consistent UI. pass noWrap={false} to disable the default behaviour. |
| ...rest | Required: false |
| type: any | |
| Other properties are passed down to the wrapping element Dropdown, such as button props, menu position etc. or even deeper to OuterEventsHandler |