npm package: @licuido-ui/ui_chiplist-with-count
Description: ChipListWithCount are compact elements that represent an input, attribute, or action.
Latest version: 3.0.1

# ChipListWithCount

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

### Author

- @author Henry Dyson J <henry@crayond.co>

## Link

[Story Book Link ChipListWithCount](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

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

## Import component

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

## Usage

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

## Image

![alt text](./deleteChip.png)

## Sample Code

```jsx
<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'  |