<template>
  <Story title="Input/Checkbox">
        <MalioCheckbox
          v-model="simpleValue"
          label="Accepter les conditions"
        />
  </Story>
</template>

<docs lang="md">
# MalioCheckbox

Composant checkbox custom avec `v-model`, message d'aide, et états visuels
`error` / `success`.

------------------------------------------------------------------------

## Props

### id

- Type: `string`
- Description: Identifiant HTML du checkbox.
- Comportement: si absent, un id unique est généré automatiquement.

### label

- Type: `string`
- Description: Texte affiche a cote de la case.

### name

- Type: `string`
- Description: Attribut `name` du champ.

### modelValue

- Type: `boolean | null | undefined`
- Description: État coche du composant.

### inputClass

- Type: `string`
- Description: Classes supplémentaires appliquées a l'input natif.

### labelClass

- Type: `string`
- Description: Classes supplémentaires appliquées au label.

### groupClass

- Type: `string`
- Description: Classes supplémentaires appliquées au conteneur.

### required

- Type: `boolean`
- Description: Ajoute l'attribut HTML `required`.

### disabled

- Type: `boolean`
- Description: Désactive le composant.

### readonly

- Type: `boolean`
- Description: Empêche la mise a jour du `v-model` tout en gardant
  l'affichage courant.

### hint

- Type: `string`
- Description: Message d'aide affiche sous le checkbox.

### error

- Type: `string`
- Description: Message d'erreur.
- Effet: prioritaire sur `success`, applique `aria-invalid` et la couleur
  d'erreur au texte et a la case.

### success

- Type: `string`
- Description: Message de succès.
- Effet: applique la couleur de succès au texte et a la case si `error`
  est absent.

------------------------------------------------------------------------

## Accessibilité

- `aria-invalid` est active si `error` existe.
- `aria-describedby` pointe vers le message affiche.
- L'input natif reste present pour conserver le comportement formulaire.

------------------------------------------------------------------------

## Event

### update:modelValue

- Émis a chaque changement de l'état coche.
- Retourne un booléen `true` ou `false`.
</docs>

<script setup lang="ts">
import {ref} from 'vue'
import MalioCheckbox from '../components/malio/Checkbox.vue'

const simpleValue = ref(false)
</script>
