npm package: @licuido-ui/ui_filter-chiplist
Description: Filter chips clearly delineate and display options in a compact area. They are a good chips. A filter chip.
Latest version: 4.0.1

# FilterChipList

Filter chips clearly delineate and display options in a compact area. They are a good chips. A filter chip.

### Author

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

## Link

[Story Book Link FilterChipList](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_filter-chiplist
```

## Import component

```jsx
import { FilterChipList } from '@licuido-ui/ui_filter-chiplist';
```

## Usage

```jsx
<FilterChipList
  handleClearClick={() => console.log('handleCLearClick')}
  handleFilterClick={() => console.log('handleFilterClick')}
  handleChipClick={(item) => console.log('handleClick', item)}
  handleDelete={(item) => console.log('handleDelete', item)}
  variant={'filled'}
  options={List}
/>
```

## Image

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

## Sample Code

```jsx
<FilterChipList
  filterchipTestId={'filterChipList'}
  clearButtonLabel={'Clear all'}
  chipDirection={'row'}
  className={''}
  sx={{}}
  chipGap={2}
  chipWrap={'wrap'}
  handleFilterClick={() => false}
  handleClearClick={() => false}
  handleChipClick={() => false}
  handleDelete={() => false}
  deleteIcon={<DeleteIcon />}
  chipStyles={{}}
  labelStyles={{}}
  filterChipButtonIcon={<FilterIcon />}
  filterButtonStyle={{}}
/>
```

## Props

| **Name**                 | Description                                               | Default                                                   | Control            |
| ------------------------ | --------------------------------------------------------- | --------------------------------------------------------- | ------------------ |
| **filterchipTestId**     | string                                                    | string                                                    | string             |
| **sx**                   | SxProps                                                   | SxProps                                                   | SxProps            |
| **chipStyles**           | SxProps                                                   | SxProps                                                   | SxProps            |
| **labelStyles**          | SxProps                                                   | SxProps                                                   | SxProps            |
| **className**            | string                                                    | string                                                    | string             |
| **handleChipClick**      | ()=>{}                                                    | ()=>{}                                                    | ()=>{}             |
| **handleFilterClick**    | ()=>{}                                                    | ()=>{}                                                    | ()=>{}             |
| **handleClearClick**     | ()=>{}                                                    | ()=>{}                                                    | ()=>{}             |
| **handleDelete**         | ()=>{}                                                    | ()=>{}                                                    | ()=>{}             |
| **startIcon**            | React.ReactElement                                        | React.ReactElement                                        | React.ReactElement |
| **deleteIcon**           | React.ReactElement                                        | React.ReactElement                                        | React.ReactElement |
| **disabled**             | Boolean                                                   | Boolean                                                   | false              |
| **variant**              | 'filled' `or` 'outlined';                                 | 'filled' `or` 'outlined';                                 | filled             |
| **chipGap**              | number                                                    | number                                                    | 2                  |
| **variant**              | 'filled' `or` 'outlined';                                 | 'filled' `or` 'outlined';                                 | filled             |
| **chipWrap**             | 'wrap'`or` 'nowrap'`or` 'wrap-reverse'                    | 'wrap'`or` 'nowrap'`or` 'wrap-reverse'                    | wrap               |
| **chipDirection**        | 'column'`or` 'column-reverse'`or` 'row'`or` 'row-reverse' | 'column'`or` 'column-reverse'`or` 'row'`or` 'row-reverse' | row                |
| **filterButtonStyle**    | SxProp                                                    | SxProp                                                    | {}                 |
| **clearButtonStyle**     | SxProp                                                    | SxProp                                                    | {}                 |
| **filterChipButtonIcon** | React.ReactElement                                        | React.ReactElement                                        | React.ReactElement |
| **options**              | []                                                        | []                                                        | []                 |
| **clearButtonLabel**     | string                                                    | string                                                    | string             |
| **maximumChipShow**      | number                                                    | number                                                    | number             |