---
title: "Chip"
description: "Chips are used to select from a set of defined options. Chips can also represent a set of chosen options."
url: https://developers.dhis2.org/docs/ui/components/chip
source: https://github.com/dhis2/developer-portal/edit/main/docs/ui/components/chip.md
---

# Chip

Chips are used to select from a set of defined options. Chips can also represent a set of chosen options.

[Interactive demo: chip--default](https://developers.dhis2.org/demo/?path=/story/chip--default)

```jsx
<Chip>Hello world</Chip>
```

## Usage

### When to use

- **Choose from defined options**. Use chips to represent a set of options. Each option is represented by a chip. Choosing a chip updates another area or object.
- **Add or remove options**. Chips can be used to show items or attributes assigned to an object, like choosing filters to be applied to a list.

### When not to use

- **Actions**. Don't use chips for triggering actions. Use a [`Button`](https://developers.dhis2.org/docs/ui/components/button.md) instead.
- **Display only**. Don't use chips if they aren't interactive. For displaying a status or label, use a [`Tag`](https://developers.dhis2.org/docs/ui/components/tag.md) instead.

### Format

#### Content

- Keep chip labels short. Chips with long labels don't work well in a group.
- Don't use action verbs in chip labels. Chips for choosing a dashboard to view should use the dashboard name without any verb as a label.

#### Size

[Interactive demo: chip--dense](https://developers.dhis2.org/demo/?path=/story/chip--dense)

```jsx
<Chip dense>Hello world</Chip>
```

- Chips are available in two sizes, regular and `dense`.
- Use regular sized chips where there is space.
- Use `dense` sized chips in information-dense pages, or inside other components.

#### Spacing

- Chips have a default margin, so that they'll be spaced correctly in a group.
- A smaller margin can be useful for `dense` chips when space is limited.
- Always include some space between chips in a group.

## Options

### Single or multiple selection

- A group of chips can allow choosing or one chip or several chips.
- **Single selection**. Choosing one chip is useful when toggling between objects, like choosing which dashboard to view.
- **Multiple selection**. Choosing several chips is useful when applying options to something, like applying filters to a list of data, or choosing options from a list.

### Removable

[Interactive demo: chip--removable](https://developers.dhis2.org/demo/?path=/story/chip--removable)

```jsx
<Chip onRemove>Hello world</Chip>
```

- Use removable chips if an option can be removed from the group.
- Only use removable chips when chips can be added back to the same group through another action, like choosing from a menu.

### Icon

[Interactive demo: chip--icon](https://developers.dhis2.org/demo/?path=/story/chip--icon)

```jsx
<Chip icon={<IconStar24 />}>Hello world</Chip>
```

- Chips can show an icon before the text label.
- Icons are useful to highlight special chips, like starred items.
- Don't use the same icon for all the chips in a group. Use a title or heading for that group of chips instead.

## API Reference

### Chip

#### Usage

To use `Chip`, you can import the component from the `@dhis2/ui` library  

```js
import { Chip } from '@dhis2/ui'
```

#### Props

|Name|Type|Default|Required|Description|
|---|---|---|---|---|
|children|any||||
|className|string||||
|dataTest|string|``'dhis2-uicore-chip'``|||
|dense|boolean||||
|disabled|boolean||||
|dragging|boolean||||
|icon|element||||
|marginBottom|number|``4``||`margin-bottom` value, applied in `px`|
|marginInlineEnd|number|||`margin-inline-end` value, applied in `px`|
|marginInlineStart|number|||`margin-inline-start` value, applied in `px`|
|marginLeft|number|||`margin-inline-start` value, applied in `px`|
|marginRight|number|||`margin-inline-end` value, applied in `px`|
|marginTop|number|``4``||`margin-top` value, applied in `px`|
|overflow|boolean||||
|selected|boolean||||
|onClick|function||||
|onRemove|function||||