> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/lists/chips.md).

# Chips

This component is very similar in meaning to CheckboxList. You have a list of options and user can select all of them, some of them or none of them. The component is convenient to use for filtering search results - it takes up little space and is very easy for the user.

```tsx
import { Chips, Option } from 'altrone-ui';

const OPTIONS: Option<number>[] = [
    { label: "Yesterday", value: -1 },
    { label: "Today", value: 0 },
    { label: "Tomorrow", value: 1 },
]

const [selected, setSelected] = useState([0]);

return <Chips values={selected} onChange={setSelected} options={OPTIONS} />
```

## Properties <mark style="color:orange;">\<T, IsMultiple = true></mark>

| Property                                              | Type                                                                                                      | Description                                                  |
| ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
| **`values`**<mark style="color:red;">**`*`**</mark>   | <p><code>T\[]</code><br><br><code>T</code> (if IsMultiple = false)</p>                                    | List of selected chips                                       |
| **`options`**<mark style="color:red;">**`*`**</mark>  | [`Option<T>`](/altrone-ui/utils/types/option.md)`[];`                                                     | List of chips                                                |
| **`onChange`**<mark style="color:red;">**`*`**</mark> | <p><code>(values: T\[]) => void</code><br><br><code>(value: T) => void</code> (if isMultiple = false)</p> | Callback is called when user toggles the chip                |
| **`SelectedIcon`**                                    | `JSX.Element`                                                                                             | Custom icon of selected chip                                 |
| **`direction`**                                       | [`Direction`](/altrone-ui/utils/enums/direction.md)                                                       | Direction of the list. Default value is `horizontal`         |
| **`size`**                                            | [`Size`](/altrone-ui/utils/enums/size.md)                                                                 | Size of the chips                                            |
| **`multiple`**                                        | `boolean`                                                                                                 | Allows to choose more that one chip. Default value is `true` |

## History

* **`Altrone 2.1`**:
  * added `multiple` prop
* **`Altrone 1.2`**: added generic
* **`Altrone 1.0`**: initial release