```ts
import Pills from "~/components/ui/Pills.vue"
```
# Pills
Show a dense list of pills representing tags, categories or options.
Users can select a subset of given options and create new ones.
The model you provide will be mutated by this component:
- `currents`: these items are currently selected
- `others`: these items are currently not selected (but can be selected by the user). This prop is optional. By adding it, you allow users to change the selection.
Each item has a `label` of type `string` as well as a `type` of either:
- `custom`: the user can edit its label or
- `preset`: the user cannot edit its label
## No pills
```ts
const nullModel = ref({
currents: []
}) as { currents: Item[] };
```
```vue-html
```
## Predefined list of pills
```ts
const staticModel = ref({
currents: [
{ label: "#Noise", type: 'preset' },
{ label: "#FieldRecording", type: 'preset' },
{ label: "#Experiment", type: 'preset' }
]
});
```
```vue-html
```
## Let users select and unselect pills
Select a set of pills from presets, and add and remove custom ones
```ts
const interactiveModel = ref({
...staticModel,
others: [
{ label: "#Melody", type: 'preset' },
{ label: "#Rhythm", type: 'preset' }
]
});
```
```vue-html
```
## Let users add, remove and edit custom pills
Use [reactive](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-variables-with-ref) methods [such as `computed(...)`](https://vuejs.org/guide/essentials/computed.html) and `watch(...)` to query the model.
```ts
const customModel = ref({
...staticModel,
others: [
{ label: "#MyTag1", type: 'custom' },
{ label: "#MyTag2", type: 'custom' }
]
});
```
```vue-html
```