@licuido-ui/ui_dropdown NPM

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

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

alt text

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

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/ui_profile @licuido-ui/ui_render-form @licuido-ui/react @licuido-ui/ui_billing-payment

0.0.6

8 months ago