funkwhale/front/ui-docs/components/ui/pills.md

<script setup>
import { computed, ref } from 'vue'

import Pills from '~/components/ui/Pills.vue';
import Layout from '~/components/ui/Layout.vue';
import Input from '~/components/ui/Input.vue';

const nullModel = ref({
  current: [],
  others: []
});

const staticModel = ref({
  current: ["#Noise", "#FieldRecording", "#Experiment"]
});

const interactiveModel = ref({
  current: ["#Noise", "#FieldRecording", "#Experiment"],
  others: ["#Melody", "#Rhythm"]
});
</script>

```ts
import Pills from "~/components/ui/Pills.vue"
```

# Pills

```vue-html
<Pills v-model="staticModel" label="Tags" />
```

<Layout class="preview" style="padding:16px">
  <Pills v-model="staticModel" label="Tags" />
</Layout>

Select a set of pills from presets, and add and remove custom ones

```vue-html
<Pills v-model="interactiveModel" label="Tags" />
<Input label="Label" placeholder="Placeholder"></Input>
```

<Layout class="preview" style="padding:16px">
  <Pills v-model="interactiveModel" label="Tags" />
  <Input label="Label" placeholder="Placeholder"></Input>
</Layout>

## No pills

```vue-html
<Pills v-model="nullModel" />
```

<Layout class="preview" style="padding:16px">
  <Pills v-model="nullModel" />
</Layout>