From 09f76e75a97a650afae00c8e196b8ad0a79ebb94 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 26 Jul 2024 13:03:32 +0200
Subject: [PATCH] docs(checkbox): update

---
 docs/content/3.components/checkbox.md | 127 ++++++++++++++++++++++++++
 docs/nuxt.config.ts                   |   1 +
 2 files changed, 128 insertions(+)

diff --git a/docs/content/3.components/checkbox.md b/docs/content/3.components/checkbox.md
index 43229d13..64047c2e 100644
--- a/docs/content/3.components/checkbox.md
+++ b/docs/content/3.components/checkbox.md
@@ -11,6 +11,133 @@ links:
 
 ## Usage
 
+Use the `v-model` directive to control the checked state of the Checkbox.
+
+::component-code
+---
+external:
+  - modelValue
+ignore:
+  - label
+props:
+  label: Check me
+  modelValue: true
+---
+::
+
+Use the `default-value` prop to set the initial value of the Checkbox when you do not need to control its state.
+
+::component-code
+---
+ignore:
+  - label
+props:
+  label: Check me
+  defaultValue: true
+---
+::
+
+Use the `indeterminate` prop to set the Checkbox to an [indeterminate state](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
+
+::component-code
+---
+ignore:
+  - label
+props:
+  label: Check me
+  indeterminate: true
+---
+::
+
+### Label
+
+Use the `label` prop to set the label of the Checkbox.
+
+::component-code
+---
+props:
+  label: Check me
+---
+::
+
+### Description
+
+Use the `description` prop to set the description of the Checkbox.
+
+::component-code
+---
+ignore:
+  - label
+props:
+  label: Check me
+  description: 'This is a checkbox.'
+---
+::
+
+### Icon
+
+Use the `icon` prop to set the icon of the Checkbox when it is checked. Defaults to `i-heroicons-check-20-solid`.
+
+::component-code
+---
+ignore:
+  - label
+  - defaultValue
+props:
+  label: Check me
+  icon: 'i-heroicons-heart'
+  defaultValue: true
+---
+::
+
+::tip
+You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
+::
+
+### Style
+
+Use the `color` prop to change the style of the Checkbox.
+
+::component-code
+---
+ignore:
+  - label
+  - defaultValue
+props:
+  label: Check me
+  color: gray
+  defaultValue: true
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Checkbox.
+
+::component-code
+---
+ignore:
+  - label
+  - defaultValue
+props:
+  label: Check me
+  size: xl
+  defaultValue: true
+---
+::
+
+### Disabled
+
+::component-code
+---
+ignore:
+  - label
+props:
+  label: Check me
+  disabled: true
+---
+::
+
 ## Examples
 
 ## API
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 54305d27..80925b5a 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -125,6 +125,7 @@ export default defineNuxtConfig({
         'UBreadcrumb',
         'UButton',
         'UButtonGroup',
+        'UCheckbox',
         'UIcon',
         'UInput',
         'UKbd',