SelectChip

Chips are compact elements that represent an input, attribute, or action.

User Guidelines

Multiple select

If you want to enable multiple select, you need to pass an array of objects as the state value and also include the isMultiple prop.

Single select

If you prefer single select, you don't need to pass an array of objects in the state value, and there's no need to include the isMultiple prop. You can simply pass a single object as the value

Author

• @author Narayanamoorthi [email protected]

Link

Story Book Link SelectChip

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_select-chip

Import component

import { SelectChip } from '@licuido-ui/ui_select-chip';

Usage

    <SelectChip
      showLabel={'title'}
      options={data}
      selectChange={(value: any) => handleChange(value)}
      isMultiple={true}
      value={selected}
      isShowIcon={false}
      startIcon={<AddIcon sx={{ height: '12px', width: '12px' }} />}
    />

Image

Sample Code

<SelectChip
  options={[
    { label: 'Male', value: 'Male' },
    { label: 'Female', value: 'Female' },
    { label: 'Others', value: 'Others' },
  ]}
  id={''}
  disabled={false}
  exclusive={false}
  error={false}
  errorMessage={''}
  label={''}
  required={false}
  selectChange={()=>void}
  isMultiple = {false}
  isShowIcon = {true}
  startIcon ={null}
  selectedWithIcon={true}
/>

Props

| Prop | Type | Description | Default Props | | ------------- | -------- | ---------------------------------------- | ----------------- | | id | string | The ID of the component. | N/A | | className | string | Additional CSS class for styling. | '' | | className | string | Additional CSS class for styling. | '' | | showLabel | string | Additional Condition for a options label | '' |

| sx | object | The sx prop for styling using Theme UI. | {} | | value | Array | object | The selected value(s) of the component. | | options | array | An array of options for the component. | [] | | exclusive | boolean | If true, enables exclusive selection mode where only one option can be selected at a time. | N/A | | error | boolean | If true, indicates an error state. | false | | errorMessage | string | Custom error message text to be displayed when an error state is active. | N/A | | label | string | Custom label text for the component. | N/A | | required | boolean | If true, indicates that the component requires a selection. | false | | selectChipStyles | object | Custom styles for the SelectChip component. | {} | | selectChange | function | Callback function triggered when a selection change occurs. | console.log | | isMultiple | boolean | If true, allows the selection of multiple options simultaneously. | false | | isShowIcon | boolean | If true, displays an icon in the Select component. | true | | startIcon | Icon | React node representing the icon to be displayed at the start of the Select component. | N/A (No icon displayed by default) | | borderRadius | string | The border radius for styling. | N/A | | selectedBgcolor | string | Background color when an option is selected. | N/A | | selectedTextColor | string | Text color when an option is selected. | N/A | | bgColor | string | Background color for the component. | N/A | | bgColorHover | string | Background color when hovering over an option. | N/A | | borderColor | string | Border color for the component. | N/A | | selectedBorderColor | string | Border color when an option is selected. | N/A | | iconStyle | sx | The sx prop for styling the icon. | N/A | | selectedWithIcon | boolean | If true, after selected the chip with icon | N/A |