ChipListWithCount

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

Author

• @author Henry Dyson J [email protected]

Link

Story Book Link ChipListWithCount

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido-ui/ui_chiplist-with-count

Import component

import { ChipListWithCount } from '@licuido-ui/ui_chiplist-with-count';

Usage

<ChipListWithCount
  options={list}
  variant={'filled'}
  handleChipClick={(item) => console.log(item, 'itemclick')}
  handlechipDelete={(item) => console.log(item, 'deleteclick')}
  maximumChipShowCount={4}
  chipWrap='wrap'
/>

Image

Sample Code

<ChipListWithCount
  options={list}
  variant={'filled'}
  handleChipClick={(item) => console.log(item, 'itemclick')}
  handlechipDelete={(item) => console.log(item, 'deleteclick')}
  maximumChipShowCount={4}
  chipWrap='wrap'
/>

Props

| Name | Description | Default | Control | | ------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | --------- | | className | string | string | string | | sx | SxProps | SxProps | {} | | handleChipClick | ()=>{} | ()=>{} | | | handlechipDelete | ()=>{} | ()=>{} | | | deleteIcon | ReactNode | ReactNode | ReactNode | | startIcon | ReactNode | ReactNode | ReactNode | | chipStyles | SxProp | SxProp | SxProp | | label | string | string | string | | chipStyles | SxProp | SxProp | SxProp | | label | string | string | string | | labelStyles | SxProp | SxProp | SxProp | | maximumChipShowCount | number | number | number | | chipDirection | 'column' or 'column-reverse' or 'row' or 'row-reverse' | 'column' or 'column-reverse' or 'row' or 'row-reverse' | 'column' |