AutoCompletebox

The AutoComplete component is implemented as a custom input element of the InputBase. It extends the text field components sub-components, either the OutlinedInput, Input, or FilledInput, depending on the variant selected. It shares the same styles and many of the same props

Author

• @author Raman P [email protected]

Link

Story Book Link SelectAndautocomplete

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_select-and-autocomplete

Import component

import { SelectAndautocomplete } from '@licuido-ui/ui_select-and-autocomplete';

Usage

 <SelectAndautocomplete
          options={valu}
            variant='filled'
            selectType='chip'
            multiple
            limitTags={1}
            onChange={(e: any, value: any) => {
              console.log('valuevaluevalue', e, value);

              setSate3(value);
            }}
            startAdornmentIcon={<TruckComponent />}
          />

Image

Sample Code

 <SelectAndautocomplete
          options={valu}
            variant='filled'
            selectType='chip'
            multiple
            limitTags={1}
            onChange={(e: any, value: any) => {
              console.log('valuevaluevalue', e, value);

              setSate3(value);
            }}
            startAdornmentIcon={<TruckComponent />}
            value={state3}
            label={'Username'}
            required
            addOptionAction={() => console.log('hih')}
            onOpen={onOpen}
            ListboxProps={listboxProps}
          />

| Prop | Type | Default Value | Description | | ------------------------ | --------------------- | ------------------------------------------- | ------------------------------------------------ | --- | --- | | selectType | String | 'default' | Type of select component. | | rootStyleSx | Object | { background: '' } | Custom styling for the root element. | | | | limitTags | Number | 3 | Maximum number of tags to display. | | multiple | Boolean | true | Allow multiple selections (true/false). | | value | Array | [] | Selected options. | | label | String | 'select' | Label text. | | onChange | Function | handleSelectChange | Callback function for handling select changes. | | options | Array | See example | An array of option objects with label and value. | | | | required | Boolean | '' | required of the Input. | | isError | Boolean | true | Showing error in input (true/false). | | helperText | String | '' | Show of the input element. | | borderColor | String | '1px solid blue' | Border style of the input element. | | addNewStartIcon | JSX Element | <AddIconComponent /> | Add start icon of the input element. | | | startAdornmentIcon | JSX Element | <SearchIcon width={'18px'} color='red' /> | Start adornment for the input. | | | endAdornmentIcon | JSX Element | <ArrowDown width={'18px'} color='red' /> | End adornment for the input. | | optionSelectedIcon | JSX Element | <TickComponent /> | Drop adornment for the input. | | chipStyle | Object | '3px' | style for chips. | | optionStyle | Object | '' | style of the option. | | labelSx | Object | '' | style of the label. | | delecteChipColor | String | '' | delecteChip icon Color of chip. | | freeSolo | Boolean | true | Allow freeSolo selections (true/false). | | optionSelectedIconShow | Boolean | true | Allow optionSelectedIcon Show (true/false). | | dividerStyle | React.CSSProperties | {} | Custom styles for the "divider". | | addOptionBtnLabel | String | '' | addOptionBtnLabel of option chip. | | addOptionAction | Function | addOptionAction | Callback function for handling option add. | | toolTipStyle | Object | {} | style of the label chip. | | toolTiPlacement | String | '' | Position of the tooltip. | | dividerEndAornmentShow | Boolean | true | Allow input end divider selections (true/false). | | toolTipLabel | String | '' | Label of the tooltip. | | disabled | Boolean | true | Input not allow (true/false). | | addOptionBtnStyleProps | Object | {} | Style for the Add New Options Button | | labelStyleProps | Object | {} | Style for the Input Label | | opOpen | Function | {} | calling function for opening dropdown | | | ListboxProps | Object | {} | ListboxProps | | | filterOptionsProps | Function | {} | calling function for filtering dropdown options | | freeSoloAddText | String | '' | Text for the freesolo Add text |