Dropdown

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

Author

• @author Hariharan [email protected]

Link

Story Book Link to Dropdown

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_dropdown

Import component

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

Usage

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

Image

Sample Code

<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<{}> | - | labelStyle : {} | | inputStyle | SxProps<{}> | - | inputStyle : {} | | value* | | - | "" | | optionListStyle | SxProps<{}> | - | 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<unknown>, child: ReactNode) => 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<Theme> | - | 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<any> | - | 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<unknown> | - | 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<HTMLDivElement> | - | Set object | | menuProps | MenuProps | - | Set object | | selectIcon | ElementType<unknown> | - | Set object |