npm package: @licuido-ui/ui_dropdown
Description: Select components are used for collecting user provided information from a list of options.
Latest version: 0.0.6

# Dropdown

Select components are used for collecting user provided information from a list of options.


### Author

- @author Hariharan <hariharan@crayond.co>

## Link

[Story Book Link to Dropdown](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_dropdown
```

## Import component

```jsx
import { Dropdown } from '@licuido-ui/ui_dropdown';
```

## Usage

```jsx
<Dropdown value={''} placeholder={'Select'} />
```


## Image

![alt text](./dropdown.png)

## Sample Code
```jsx
<Dropdown 
    dropDownId={''}
    labelStyle={{}}
    inputStyle={{}}
    value={''}
    optionListStyle={{}}
    selectOption={[]}
    error={false}
    onChange={(event) => undefined}
    className={''}
    helperText={''}
    label={'count'}
    labelVariant={'standard'}
    required={false}
    errorMessage={''}
    placeholder={'Select'} 
/>

```
## Props

| **Name**               | **Description**                                                                                                                   | **Default** | **Control**            |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------- | ---------------------- |
| **labelStyle**         | SxProps&lt;\{\}&gt;                                                                                                               | \-          | labelStyle : \{\}      |
| **inputStyle**         | SxProps&lt;\{\}&gt;                                                                                                               | \-          | inputStyle : \{\}      |
| **value\***            |                                                                                                                                   | \-          | ""                     |
| **optionListStyle**    | SxProps&lt;\{\}&gt;                                                                                                               | \-          | optionListStyle : \{\} |
| **selectOption**       | \{ \[key: string\]: string \| number; \[key: number\]: string \| number; label: string \| number; value: string \| number; \}\[\] | \-          | selectOption : \[\]    |
| **error**              | True `or` False                                                                                                                   | false       | False                  |
| **placeholder**        | The short hint displayed in the input before the user enters a value\.string                                                      | \-          | string                 |
| **onChange\***         | (event: SelectChangeEvent&lt;unknown&gt;, child: ReactNode\) =&gt; void                                                           | \-          | \-                     |
| **className**          | string                                                                                                                            | \-          |
| **helperText**         | string                                                                                                                            | \-          |
| **required**           | If true, the input element is required\.                                                                                          | \-          | False `or` True        |
| **errorMessage**       | string                                                                                                                            | \-          |
| **sx**                 | The system prop that allows defining system overrides as well as additional CSS styles\.SxProps&lt;Theme&gt;                      | \-          | Set object             |
| **labelVariant**       | "standard""float"                                                                                                                 | \-          | standardfloat          |
| **variant**            | The variant to use\."filled""outlined""standard"                                                                                  | \-          | filledoutlinedstandard |
| **children**           | The option elements to populate the select with\.false\.ReactNode                                                                 | \-          | Set object             |
| **label**              | See OutlinedInput\#labelstring                                                                                                    | \-          | Set string             |
| **defaultValue**       | The default value\. Use when the component is not controlled\.unknown                                                             | \-          | Set object             |
| **dropDownId**         | The id of the wrapper element or the select element when native\.string                                                           | \-          | Set string             |
| **inputProps**         | Attributes applied to the input element                                                                                           |             | Set object             |
| **selectClassName**    | string                                                                                                                            | \-          | Set string             |
| **autoWidth**          | If true, the width of the popover will automatically be set according to the items inside                                         | \-          | Set boolean            |
| **defaultOpen**        |                                                                                                                                   | Set boolean |
| **displayEmpty**       |                                                                                                                                   | \-          | Set boolean            |
| **IconComponent**      | The icon that displays the arrow\.ElementType&lt;any&gt;                                                                          | \-          | Set object             |
| **labelId**            | The ID of an element that acts as an additional label\. The Select will                                                           |             | Set string             |
| **MenuProps**          | Props applied to the Menu element\.Partial&lt;unknown&gt;                                                                         | \-          | Set object             |
| **multiple**           | If true, value must be an array and the menu will support multiple selections\.boolean                                            | \-          | Set boolean            |
| **native**             | If true, the component uses a native select element\.boolean                                                                      | \-          | Set boolean            |
| **SelectDisplayProps** | Props applied to the clickable div element\.HTMLAttributes&lt;HTMLDivElement&gt;                                                  | \-          | Set object             |
| **menuProps**          | MenuProps                                                                                                                         | \-          | Set object             |
| **selectIcon**         | ElementType&lt;unknown&gt;                                                                                                        | \-          | Set object             |