From 82fae732887dcd060846087975bf2dff986ff7f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stanislas=20Ormi=C3=A8res?= <stan@stormier.ninja>
Date: Sun, 15 Sep 2024 22:24:24 +0200
Subject: [PATCH] =?UTF-8?q?feat(DsfrCheckboxSet)!:=20am=C3=A9liore=20l?=
 =?UTF-8?q?=E2=80=99API=20modelValue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- cf. documentation

BREAKING CHANGE: `modelValue` contient un tableau des `value`
---
 demo-app/views/AppForm.vue                    | 44 ++++++++++++++-
 docs/docs-demo/DsfrCheckboxSetV7Demo.vue      | 42 ++++++++++++++
 docs/guide/migrations.md                      | 19 ++++++-
 .../DsfrCheckbox/DsfrCheckbox.stories.ts      |  3 +
 .../DsfrCheckbox/DsfrCheckbox.types.ts        |  6 +-
 src/components/DsfrCheckbox/DsfrCheckbox.vue  | 13 ++---
 .../DsfrCheckbox/DsfrCheckboxSet.md           | 12 +++-
 .../DsfrCheckbox/DsfrCheckboxSet.spec.ts      | 29 ++++++++--
 .../DsfrCheckbox/DsfrCheckboxSet.stories.ts   | 55 +++++++++++--------
 .../DsfrCheckbox/DsfrCheckboxSet.vue          | 20 +++----
 .../docs-demo/DsfrCheckboxDemo.vue            | 10 +++-
 .../docs-demo/DsfrCheckboxSetDemo.vue         | 33 ++++++-----
 12 files changed, 211 insertions(+), 75 deletions(-)
 create mode 100644 docs/docs-demo/DsfrCheckboxSetV7Demo.vue

diff --git a/demo-app/views/AppForm.vue b/demo-app/views/AppForm.vue
index ca7caae5..a0c2d3ee 100644
--- a/demo-app/views/AppForm.vue
+++ b/demo-app/views/AppForm.vue
@@ -1,12 +1,14 @@
-<script setup>
+<script setup lang="ts">
 import DsfrAlert from '@/components/DsfrAlert/DsfrAlert.vue'
-
 import DsfrButton from '@/components/DsfrButton/DsfrButton.vue'
+import DsfrCheckboxSet from '@/components/DsfrCheckbox/DsfrCheckboxSet.vue'
 import DsfrFileUpload from '@/components/DsfrFileUpload/DsfrFileUpload.vue'
 import DsfrRadioButtonSet from '@/components/DsfrRadioButton/DsfrRadioButtonSet.vue'
 import { ref } from 'vue'
+import type { DsfrCheckboxSetProps } from '@/components/DsfrCheckbox/DsfrCheckbox.types'
 
 const inputValue = ref('')
+const showAlert = ref(true)
 const filesToUpload = ref(undefined)
 
 const updateFiles = (files) => {
@@ -20,6 +22,27 @@ const sendFile = () => {
 
 const whatever = ref('')
 const radioTest = ref('')
+
+const selectedCheckbox = ref(false)
+const selectedCheckboxes = ref([])
+const cbLegend = 'Légende des cases à cocher'
+const cbOptions: DsfrCheckboxSetProps['options'] = [
+  {
+    value: 'test1',
+    modelValue: 'test1',
+    label: 'Test 1',
+  },
+  {
+    value: 'test2',
+    modelValue: 'test2',
+    label: 'Test 2',
+  },
+  {
+    value: 'test3',
+    modelValue: 'test3',
+    label: 'Test 3',
+  },
+]
 </script>
 
 <template>
@@ -72,6 +95,7 @@ const radioTest = ref('')
         </template>
       </DsfrRadioButtonSet>
     </div>
+
     <DsfrButton
       type="submit"
       label="Bouton de soumission du formulaire"
@@ -89,5 +113,21 @@ const radioTest = ref('')
         />
       </template>
     </DsfrInput>
+
+    <h2>ChecboxSet :</h2>
+    <DsfrCheckboxSet
+      v-model="selectedCheckboxes"
+      :legend="cbLegend"
+      :options="cbOptions"
+    />
+    Sélectionné(s) : {{ selectedCheckboxes }}
+
+    <h2>Checbox seule :</h2>
+    <DsfrCheckbox
+      v-model="selectedCheckbox"
+      label="Une seule checkbox"
+      value="test_only_cb"
+    />
+    Sélectionné : {{ selectedCheckbox }}
   </form>
 </template>
diff --git a/docs/docs-demo/DsfrCheckboxSetV7Demo.vue b/docs/docs-demo/DsfrCheckboxSetV7Demo.vue
new file mode 100644
index 00000000..dc7bb54d
--- /dev/null
+++ b/docs/docs-demo/DsfrCheckboxSetV7Demo.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import DsfrCheckboxSet from '@/components/DsfrCheckbox/DsfrCheckboxSet.vue'
+import { ref } from 'vue'
+import type { DsfrCheckboxSetProps } from '@/components/DsfrCheckbox/DsfrCheckbox.types'
+
+const selectedCheckboxes = ref([])
+const cbLegend = 'Légende des cases à cocher'
+const cbOptions: DsfrCheckboxSetProps['options'] = [
+  {
+    value: 'une chaîne',
+    modelValue: 'test1',
+    label: 'Test 1',
+  },
+  {
+    value: 42,
+    modelValue: 'test2',
+    label: 'Test 2',
+  },
+  {
+    value: { objet: 'complexe' },
+    modelValue: 'test3',
+    label: 'Test 3',
+  },
+]
+</script>
+
+<template>
+  <form>
+    <DsfrCheckboxSet
+      v-model="selectedCheckboxes"
+      :legend="cbLegend"
+      :options="cbOptions"
+    />
+    <p>
+      Sélectionné(s) : {{ selectedCheckboxes }}
+    </p>
+    <input
+      type="submit"
+      class="fr-btn"
+    >
+  </form>
+</template>
diff --git a/docs/guide/migrations.md b/docs/guide/migrations.md
index e1024677..7d9d442c 100644
--- a/docs/guide/migrations.md
+++ b/docs/guide/migrations.md
@@ -1,10 +1,19 @@
 # Migrations
 
-## Migration vers 6.x (depuis 4.x ou 5.x)
+## Migration vers 7.x (depuis 4.x, 5.x ou 6.x)
 
-Dans cette version majeure, il y a plusieurs sujets à traiter lorsque vous migrerez :
+Avant la v7, le tableau `modelValue` de [`DsfrCheckboxSet`](/composants/DsfrCheckboxSet) était un tableau de `string` avec les valeurs des propriétés de l’attribut `name` de chaque case à cocher.
+
+Ce n’était ni une API idéale, ni le comportement attendu en Vue natif ou en HTML/JS natif.
+
+::: code-group
+<Story data-title="Démo" min-h="350px">
+  <DsfrCheckboxSetV7Demo />
+</Story>
+
+<<< ../docs-demo/DsfrCheckboxSetV7Demo.vue [Code de la démo]
+:::
 
-1. Les icônes
 2. Les onglets
 3. Les accordéons
 
@@ -250,3 +259,7 @@ export default defineNuxtConfig({
   ],
 })
 ```
+
+<script setup>
+import DsfrCheckboxSetV7Demo from '../docs-demo/DsfrCheckboxSetV7Demo.vue'
+</script>
diff --git a/src/components/DsfrCheckbox/DsfrCheckbox.stories.ts b/src/components/DsfrCheckbox/DsfrCheckbox.stories.ts
index 880a437c..ba52b49f 100644
--- a/src/components/DsfrCheckbox/DsfrCheckbox.stories.ts
+++ b/src/components/DsfrCheckbox/DsfrCheckbox.stories.ts
@@ -71,9 +71,11 @@ export const Checkbox = (args) => ({
         :required="required"
         :small="small"
         :hint="hint"
+        :value="value"
         :name="name || 'name1'"
         v-model="modelValue"
       />
+      {{ modelValue }}
   `,
   watch: {
     modelValue (newValue) {
@@ -88,6 +90,7 @@ Checkbox.args = {
   small: false,
   label: 'Checkbox 1',
   name: 'name1',
+  value: 'name1',
   hint: 'Description 1',
 }
 Checkbox.play = async ({ canvasElement }) => {
diff --git a/src/components/DsfrCheckbox/DsfrCheckbox.types.ts b/src/components/DsfrCheckbox/DsfrCheckbox.types.ts
index cdba0503..9c4150c2 100644
--- a/src/components/DsfrCheckbox/DsfrCheckbox.types.ts
+++ b/src/components/DsfrCheckbox/DsfrCheckbox.types.ts
@@ -4,7 +4,9 @@ export type DsfrCheckboxProps = {
   id?: string
   name: string
   required?: boolean
-  modelValue?: boolean
+  value: unknown
+  checked?: boolean
+  modelValue: Array<unknown>
   small?: boolean
   inline?: boolean
   label?: string
@@ -23,6 +25,6 @@ export type DsfrCheckboxSetProps = {
   validMessage?: string
   legend?: string
   options?: (DsfrCheckboxProps & InputHTMLAttributes)[]
-  modelValue?: string[]
+  modelValue?: Array<unknown>
   ariaInvalid?: boolean
 }
diff --git a/src/components/DsfrCheckbox/DsfrCheckbox.vue b/src/components/DsfrCheckbox/DsfrCheckbox.vue
index 90209bae..48622eb1 100644
--- a/src/components/DsfrCheckbox/DsfrCheckbox.vue
+++ b/src/components/DsfrCheckbox/DsfrCheckbox.vue
@@ -18,16 +18,10 @@ const props = withDefaults(defineProps<DsfrCheckboxProps>(), {
   label: '',
 })
 
-const emit = defineEmits<{ (event: 'update:modelValue', value: boolean): void }>()
-
 const message = computed(() => props.errorMessage || props.validMessage)
 
 const additionalMessageClass = computed(() => props.errorMessage ? 'fr-error-text' : 'fr-valid-text')
-
-const emitNewValue = ($event: InputEvent) => {
-  // @ts-expect-error This is a checkbox input event, so `checked` property is present
-  emit('update:modelValue', $event.target.checked)
-}
+const modelValue = defineModel()
 </script>
 
 <template>
@@ -45,14 +39,15 @@ const emitNewValue = ($event: InputEvent) => {
     >
       <input
         :id="id"
+        v-model="modelValue"
         :name="name"
         type="checkbox"
-        :checked="modelValue"
+        :value="value"
+        :checked="modelValue === true || (Array.isArray(modelValue) && modelValue.includes(value))"
         :required
         v-bind="$attrs"
         :data-testid="`input-checkbox-${id}`"
         :data-test="`input-checkbox-${id}`"
-        @change="emitNewValue($event as InputEvent)"
       >
       <label
         :for="id"
diff --git a/src/components/DsfrCheckbox/DsfrCheckboxSet.md b/src/components/DsfrCheckbox/DsfrCheckboxSet.md
index 0273a103..cb69dbf0 100644
--- a/src/components/DsfrCheckbox/DsfrCheckboxSet.md
+++ b/src/components/DsfrCheckbox/DsfrCheckboxSet.md
@@ -16,7 +16,7 @@ Le composant `DsfrCheckboxSet` est composé des éléments suivants :
 | Nom                   | Type                                    | Description                                                   | Obligatoire |
 |-----------------------|-------------------------------------------|----------------------------------------------------------------|--------------|
 | `options`               | *`(DsfrCheckboxProps & InputHTMLAttributes)[]`* | Tableau d'options définissant les cases à cocher individuelles   | ✅           |
-| `modelValue`            | *`string[]`*                                | Valeur courante du composant, un tableau de noms des cases cochées | ✅           |
+| `modelValue`            | *`string[]`*                                | Valeur courante du composant, un tableau de valeurs (propriété `value` de chaque option de la prop `options`) des cases cochées | ✅           |
 | `disabled`              | *`boolean`*                                | Indique si l'ensemble des cases à cocher est désactivé           |           |
 | `errorMessage`         | *`string`*                                 | Message d'erreur global à afficher                             |           |
 | `inline`                | *`boolean`*                                | Affiche les cases à cocher en ligne (par défaut : `false`)            |           |
@@ -26,6 +26,14 @@ Le composant `DsfrCheckboxSet` est composé des éléments suivants :
 | `titleId`               | *`string`*                                 | Identifiant unique du champ (générée automatiquement si non fournie) |           |
 | `validMessage`         | *`string`*                                 | Message de validation global à afficher                         |           |
 
+::: danger Attention
+
+Avant la v7, le tableau `modelValue` était un tableau de `string` avec les valeurs des propriétés de l’attribut `name` de chaque case à cocher.
+
+Ce n’était ni une API idéale, ni le comportement attendu en Vue natif ou en HTML/JS natif.
+
+:::
+
 ## 📡 Événements
 
 `DsfrCheckboxSet` émet l'événement suivant :
@@ -43,7 +51,7 @@ Le composant `DsfrCheckboxSet` est composé des éléments suivants :
 
 ## 🪆 Relation avec `DsfrCheckbox`
 
-`DsfrChecboxSet` utilise en interne `DsfrCheckbox`, et permet de récupérer dans `modelValue` sous forme de tableau non pas les états de chaque case à cocher, mais un tableau de `string` contenant les valeurs de la prop `name` de chaque case à cocher qui est cochée.
+`DsfrChecboxSet` utilise en interne `DsfrCheckbox`, et permet de récupérer dans `modelValue` sous forme de tableau les valeurs de la prop `value` de chaque case à cocher qui est cochée.
 
 Cf. les exemples ci-dessous
 
diff --git a/src/components/DsfrCheckbox/DsfrCheckboxSet.spec.ts b/src/components/DsfrCheckbox/DsfrCheckboxSet.spec.ts
index 8e5bc246..bd0d188c 100644
--- a/src/components/DsfrCheckbox/DsfrCheckboxSet.spec.ts
+++ b/src/components/DsfrCheckbox/DsfrCheckboxSet.spec.ts
@@ -12,26 +12,30 @@ describe('DsfrCheckboxSet', () => {
     const secondHintText = 'Deuxième indice'
     const thirdLabelText = 'Troisième label'
     const thirdHintText = 'Troisième indice'
+    const modelValue = []
     const options = [
       {
         id: '1',
         label: firstLabelText,
-        checked: false,
+        value: 'un',
         hint: firstHintText,
+        modelValue,
         name: '1',
       },
       {
         id: '2',
         label: secondLabelText,
-        checked: false,
+        value: 'deux',
         hint: secondHintText,
+        modelValue,
         name: '2',
       },
       {
         id: '3',
         label: thirdLabelText,
-        checked: false,
+        value: 'trois',
         hint: thirdHintText,
+        modelValue,
         name: '3',
       },
     ]
@@ -64,22 +68,27 @@ describe('DsfrCheckboxSet', () => {
     const secondHintText = 'Deuxième indice'
     const thirdLabelText = 'Troisième label'
     const thirdHintText = 'Troisième indice'
+    const modelValue = ['name2']
+
     const options = [
       {
         id: '1',
         name: 'name1',
+        value: 'name1',
         label: firstLabelText,
         hint: firstHintText,
       },
       {
         id: '2',
         name: 'name2',
+        value: 'name2',
         label: secondLabelText,
         hint: secondHintText,
       },
       {
         id: '3',
         name: 'name3',
+        value: 'name3',
         label: thirdLabelText,
         hint: thirdHintText,
       },
@@ -87,7 +96,7 @@ describe('DsfrCheckboxSet', () => {
     const legendText = 'Légende de l’ensemble des champs'
 
     // When
-    const { getByText, getByTestId } = render(DsfrCheckboxSet, {
+    const { getByText, getByLabelText, getByTestId } = render(DsfrCheckboxSet, {
       global: {
         components: {
           VIcon,
@@ -96,26 +105,34 @@ describe('DsfrCheckboxSet', () => {
       props: {
         legend: legendText,
         options,
+        modelValue,
         validMessage: 'Message d’erreur',
-        modelValue: ['name3'],
       },
     })
 
     const firstLabelEl = getByText(firstLabelText)
     const secondLabelEl = getByText(secondLabelText)
+    const thirdLabelEl = getByText(`${thirdLabelText}`)
+    const thirdInput = getByLabelText(`${thirdLabelText} ${thirdHintText}`)
     const firstInput = getByTestId('input-checkbox-1')
     const secondInput = getByTestId('input-checkbox-2')
+    // @ts-expect-error This is a checkbox input event, so `checked` property is present
+    expect((firstInput).checked).toBe(false)
+    // @ts-expect-error This is a checkbox input event, so `checked` property is present
+    expect(secondInput.checked).toBe(true)
     await fireEvent.click(firstLabelEl)
     await fireEvent.click(secondLabelEl)
-    await fireEvent.click(secondLabelEl)
+    await fireEvent.click(thirdLabelEl)
 
     // Then
     expect(firstInput).toBeInTheDocument()
     expect(firstInput).toHaveAttribute('name', 'name1')
+    expect(secondInput).toHaveAttribute('name', 'name2')
     // @ts-expect-error This is a checkbox input event, so `checked` property is present
     expect((firstInput).checked).toBe(true)
     // @ts-expect-error This is a checkbox input event, so `checked` property is present
     expect(secondInput.checked).toBe(false)
+    expect(thirdInput.checked).toBe(true)
   })
 
   it('should render no checkboxes', async () => {
diff --git a/src/components/DsfrCheckbox/DsfrCheckboxSet.stories.ts b/src/components/DsfrCheckbox/DsfrCheckboxSet.stories.ts
index 67932391..f20b2b52 100644
--- a/src/components/DsfrCheckbox/DsfrCheckboxSet.stories.ts
+++ b/src/components/DsfrCheckbox/DsfrCheckboxSet.stories.ts
@@ -88,24 +88,27 @@ CheckboxSet.args = {
   small: false,
   errorMessage: '',
   validMessage: '',
-  modelValue: ['name1'],
+  modelValue: ['value1'],
   options: [
     {
       label: 'Valeur 1',
       id: 'name1',
       name: 'name1',
+      value: 'value1',
       hint: 'Description 1',
     },
     {
       label: 'Valeur 2',
       id: 'name2',
       name: 'name2',
+      value: 'value2',
       hint: 'Description 2',
     },
     {
       label: 'Valeur 3',
       id: 'name3',
       name: 'name3',
+      value: 'value3',
       hint: 'Description 3',
     },
   ],
@@ -150,24 +153,27 @@ CheckboxSetRequis.args = {
   required: true,
   errorMessage: '',
   validMessage: '',
-  modelValue: ['name1'],
+  modelValue: ['value1'],
   options: [
     {
       label: 'Valeur 1',
       id: 'name1',
       name: 'name1',
+      value: 'value1',
       hint: 'Description 1',
     },
     {
       label: 'Valeur 2',
       id: 'name2',
       name: 'name2',
+      value: 'value2',
       hint: 'Description 2',
     },
     {
       label: 'Valeur 3',
       id: 'name3',
       name: 'name3',
+      value: 'value3',
       hint: 'Description 3',
     },
   ],
@@ -215,24 +221,27 @@ CheckboxSetRequisPersonnalise.args = {
   errorMessage: '',
   validMessage: '',
   requiredText: '(en choisir au moins un)',
-  modelValue: ['name1'],
+  modelValue: ['value1'],
   options: [
     {
       label: 'Valeur 1',
       id: 'name1',
       name: 'name1',
+      value: 'value1',
       hint: 'Description 1',
     },
     {
       label: 'Valeur 2',
       id: 'name2',
       name: 'name2',
+      value: 'value2',
       hint: 'Description 2',
     },
     {
       label: 'Valeur 3',
       id: 'name3',
       name: 'name3',
+      value: 'value3',
       hint: 'Description 3',
     },
   ],
@@ -274,28 +283,28 @@ CheckboxSetAvecErreur.args = {
   inline: false,
   required: false,
   errorMessage: 'Message d\'erreur',
-  modelValue: ['name1'],
+  modelValue: ['value1'],
   options: [
     {
       label: 'Valeur 1',
       id: 'name1',
       name: 'name1',
-      checked: false,
+      value: 'value1',
       hint: 'Description 1',
     },
     {
       label: 'Valeur 2',
       id: 'name2',
       name: 'name2',
-      checked: false,
+      value: 'value2',
       hint: 'Description 2',
     },
     {
       label: 'Valeur 3',
       id: 'name3',
       name: 'name3',
+      value: 'value3',
       hint: 'Description 3',
-      checked: false,
     },
   ],
 }
@@ -345,7 +354,7 @@ export const CheckboxSetAvecSucces = (args) => ({
 })
 CheckboxSetAvecSucces.args = {
   legend: 'Légende des champs',
-  modelValue: ['name1'],
+  modelValue: ['value1'],
   inline: false,
   validMessage: 'Message de succès',
   options: [
@@ -353,22 +362,22 @@ CheckboxSetAvecSucces.args = {
       label: 'Valeur 1',
       id: 'name1',
       name: 'name1',
-      checked: false,
+      value: 'value1',
       hint: 'Description 1',
     },
     {
       label: 'Valeur 2',
       id: 'name2',
       name: 'name2',
-      checked: false,
+      value: 'value2',
       hint: 'Description 2',
     },
     {
       label: 'Valeur 3',
       id: 'name3',
       name: 'name3',
+      value: 'value3',
       hint: 'Description 3',
-      checked: false,
     },
   ],
 }
@@ -419,7 +428,7 @@ export const CheckboxSetInline = (args) => ({
 })
 CheckboxSetInline.args = {
   legend: 'Légende des champs en ligne',
-  modelValue: ['name1'],
+  modelValue: ['value1'],
   inline: true,
   errorMessage: '',
   validMessage: '',
@@ -428,22 +437,22 @@ CheckboxSetInline.args = {
       label: 'Valeur 1',
       id: 'name1',
       name: 'name1',
-      checked: false,
+      value: 'value1',
       hint: 'Description 1',
     },
     {
       label: 'Valeur 2',
       id: 'name2',
       name: 'name2',
-      checked: false,
+      value: 'value2',
       hint: 'Description 2',
     },
     {
       label: 'Valeur 3',
       id: 'name3',
       name: 'name3',
+      value: 'value3',
       hint: 'Description 3',
-      checked: false,
     },
   ],
 }
@@ -483,7 +492,7 @@ export const CheckboxSetInlineAvecErreur = (args) => ({
 })
 CheckboxSetInlineAvecErreur.args = {
   legend: 'Légende des champs en ligne',
-  modelValue: ['name1'],
+  modelValue: ['value1'],
   inline: true,
   errorMessage: 'Message d\'erreur',
   validMessage: '',
@@ -492,14 +501,14 @@ CheckboxSetInlineAvecErreur.args = {
       label: 'Valeur 1',
       id: 'name1',
       name: 'name1',
-      checked: false,
+      value: 'value1',
       hint: 'Description 1',
     },
     {
       label: 'Valeur 2',
       id: 'name2',
       name: 'name2',
-      checked: false,
+      value: 'value2',
       hint: 'Description 2',
     },
     {
@@ -507,7 +516,7 @@ CheckboxSetInlineAvecErreur.args = {
       id: 'name3',
       name: 'name3',
       hint: 'Description 3',
-      checked: false,
+      value: 'value3',
     },
   ],
 }
@@ -535,7 +544,7 @@ export const CheckboxSetInlineAvecSucces = (args) => ({
 })
 CheckboxSetInlineAvecSucces.args = {
   legend: 'Légende des champs en ligne',
-  modelValue: ['name1'],
+  modelValue: ['value1'],
   inline: true,
   errorMessage: '',
   validMessage: 'Message de succès',
@@ -544,22 +553,22 @@ CheckboxSetInlineAvecSucces.args = {
       label: 'Valeur 1',
       id: 'name1',
       name: 'name1',
-      checked: false,
+      value: 'value1',
       hint: 'Description 1',
     },
     {
       label: 'Valeur 2',
       id: 'name2',
       name: 'name2',
-      checked: false,
+      value: 'value2',
       hint: 'Description 2',
     },
     {
       label: 'Valeur 3',
       id: 'name3',
       name: 'name3',
+      value: 'value3',
       hint: 'Description 3',
-      checked: false,
     },
   ],
 }
diff --git a/src/components/DsfrCheckbox/DsfrCheckboxSet.vue b/src/components/DsfrCheckbox/DsfrCheckboxSet.vue
index 322c6d89..f7ba84b6 100644
--- a/src/components/DsfrCheckbox/DsfrCheckboxSet.vue
+++ b/src/components/DsfrCheckbox/DsfrCheckboxSet.vue
@@ -1,13 +1,15 @@
-<script lang="ts" setup>
+<script lang="ts">
 import { computed } from 'vue'
-
 import { getRandomId } from '../../utils/random-utils'
+
 import DsfrCheckbox from './DsfrCheckbox.vue'
 
 import type { DsfrCheckboxSetProps } from './DsfrCheckbox.types'
 
 export type { DsfrCheckboxSetProps }
+</script>
 
+<script lang="ts" setup>
 const props = withDefaults(defineProps<DsfrCheckboxSetProps>(), {
   titleId: () => getRandomId('checkbox', 'group'),
   errorMessage: '',
@@ -17,8 +19,6 @@ const props = withDefaults(defineProps<DsfrCheckboxSetProps>(), {
   modelValue: () => [],
 })
 
-const emit = defineEmits<{ (e: 'update:modelValue', payload: string[]): void }>()
-
 const message = computed(() => {
   return props.errorMessage || props.validMessage
 })
@@ -26,13 +26,9 @@ const additionalMessageClass = computed(() => {
   return props.errorMessage ? 'fr-error-text' : 'fr-valid-text'
 })
 
-const onChange = ({ name, checked }: { name: string, checked: boolean }) => {
-  const selected = checked
-    ? [...props.modelValue, name]
-    : props.modelValue.filter(val => val !== name)
-  emit('update:modelValue', selected)
-}
 const ariaLabelledby = computed(() => message.value ? `${props.titleId} messages-${props.titleId}` : props.titleId)
+
+const modelValue = defineModel()
 </script>
 
 <template>
@@ -70,15 +66,15 @@ const ariaLabelledby = computed(() => message.value ? `${props.titleId} messages
           v-for="option in options"
           :id="option.id"
           :key="option.id || option.name"
+          v-model="modelValue"
+          :value="option.value"
           :name="option.name"
           :label="option.label"
           :disabled="option.disabled"
           :aria-disabled="option.disabled"
           :small="small"
           :inline="inline"
-          :model-value="modelValue.includes(option.name)"
           :hint="option.hint"
-          @update:model-value="onChange({ name: option.name, checked: $event })"
         />
       </slot>
       <div
diff --git a/src/components/DsfrCheckbox/docs-demo/DsfrCheckboxDemo.vue b/src/components/DsfrCheckbox/docs-demo/DsfrCheckboxDemo.vue
index b27749a5..471e58ea 100644
--- a/src/components/DsfrCheckbox/docs-demo/DsfrCheckboxDemo.vue
+++ b/src/components/DsfrCheckbox/docs-demo/DsfrCheckboxDemo.vue
@@ -14,6 +14,7 @@ const validMessage = 'Message de validation'
   <div class="fr-container fr-my-2v">
     <DsfrCheckbox
       v-model="modelValue"
+      value="valeur 1"
       name="checkbox-simple"
       label="Case à cocher simple"
     />
@@ -21,6 +22,7 @@ const validMessage = 'Message de validation'
 
     <DsfrCheckbox
       v-model="modelValue"
+      :value="42"
       name="checkbox-disabled"
       label="Case à cocher désactivée"
       disabled
@@ -28,6 +30,7 @@ const validMessage = 'Message de validation'
 
     <DsfrCheckbox
       v-model="modelValue"
+      :value="{ foo: 'foo' }"
       name="checkbox-hint"
       label="Case à cocher avec indication"
       :hint="hint"
@@ -35,6 +38,8 @@ const validMessage = 'Message de validation'
 
     <DsfrCheckbox
       v-model="modelValue"
+      name="obligatoire"
+      value="obligatoire"
       label="Case à cocher obligatoire"
       required
       :hint="hint"
@@ -43,6 +48,7 @@ const validMessage = 'Message de validation'
     <DsfrCheckbox
       v-model="modelValue"
       name="checkbox-required-custom"
+      value="custom"
       label="Case à cocher obligatoire personnalisée"
       required
       :hint="hint"
@@ -55,6 +61,7 @@ const validMessage = 'Message de validation'
     <DsfrCheckbox
       v-model="modelValue"
       name="checkbox-error"
+      value="avec erreur"
       label="Case à cocher avec message d’erreur"
       required
       :hint="hint"
@@ -63,7 +70,8 @@ const validMessage = 'Message de validation'
 
     <DsfrCheckbox
       v-model="modelValue"
-      name="checkbox-error"
+      name="checkbox-valid"
+      value="valide"
       label="Case à cocher avec message de validation"
       required
       :hint="hint"
diff --git a/src/components/DsfrCheckbox/docs-demo/DsfrCheckboxSetDemo.vue b/src/components/DsfrCheckbox/docs-demo/DsfrCheckboxSetDemo.vue
index 4c40f635..f8cc3fe6 100644
--- a/src/components/DsfrCheckbox/docs-demo/DsfrCheckboxSetDemo.vue
+++ b/src/components/DsfrCheckbox/docs-demo/DsfrCheckboxSetDemo.vue
@@ -3,52 +3,55 @@ import { ref } from 'vue'
 
 import DsfrCheckboxSet from '../DsfrCheckboxSet.vue'
 
-const modelValue1 = ref(undefined)
-const modelValue2 = ref(undefined)
-const modelValue3 = ref(undefined)
-const modelValue4 = ref(undefined)
-const modelValue5 = ref(undefined)
-const modelValue6 = ref(undefined)
+const modelValue1 = ref([])
+const modelValue2 = ref([])
+const modelValue3 = ref([])
+const modelValue4 = ref([])
+const modelValue5 = ref([])
+const modelValue6 = ref([])
 
 const options1 = [
   {
     label: 'Première valeur',
+    value: 'une chaîne en premier',
     id: 'name1-1',
     name: 'name1-1',
-    hint: 'Description de la première valeur',
+    hint: 'La première valeur est une chaîne de caractères',
   },
   {
     label: 'Deuxième valeur',
+    value: 42,
     id: 'name1-2',
     name: 'name1-2',
-    hint: 'Description de la deuxième valeur',
+    hint: 'La valeur est ici un chiffre',
   },
   {
     label: 'Troisième valeur',
+    value: { foo: 'foo', bar: 42 },
     id: 'name1-3',
     name: 'name1-3',
-    hint: 'Description de la troisième valeur',
+    hint: 'Et ici la valeur est un littéral objet',
   },
-] as const
+]
 
 const options2 = structuredClone(options1).map(option => Object.fromEntries(
-  Object.entries(option).map(([key, value]) => [key, value.replace('name1', 'name2')]),
+  Object.entries(option).map(([key, value]) => [key, ['id', 'name'].includes(key) ? value.replace('name1', 'name2') : value]),
 ))
 
 const options3 = structuredClone(options1).map(option => Object.fromEntries(
-  Object.entries(option).map(([key, value]) => [key, value.replace('name1', 'name3')]),
+  Object.entries(option).map(([key, value]) => [key, ['id', 'name'].includes(key) ? value.replace('name1', 'name3') : value]),
 ))
 
 const options4 = structuredClone(options1).map(option => Object.fromEntries(
-  Object.entries(option).filter(([key]) => key !== 'hint').map(([key, value]) => [key, value.replace('name1', 'name4')]),
+  Object.entries(option).filter(([key]) => key !== 'hint').map(([key, value]) => [key, ['id', 'name'].includes(key) ? value.replace('name1', 'name4') : value]),
 ))
 
 const options5 = structuredClone(options1).map(option => Object.fromEntries(
-  Object.entries(option).filter(([key]) => key !== 'hint').map(([key, value]) => [key, value.replace('name1', 'name5')]),
+  Object.entries(option).filter(([key]) => key !== 'hint').map(([key, value]) => [key, ['id', 'name'].includes(key) ? value.replace('name1', 'name5') : value]),
 ))
 
 const options6 = structuredClone(options1).map(option => Object.fromEntries(
-  Object.entries(option).filter(([key]) => key !== 'hint').map(([key, value]) => [key, value.replace('name1', 'name6')]),
+  Object.entries(option).filter(([key]) => key !== 'hint').map(([key, value]) => [key, ['id', 'name'].includes(key) ? value.replace('name1', 'name6') : value]),
 ))
 
 const errorMessage = 'Message d’erreur'