From 007a0cf85ee5014eae7bad1182d058541acea07d Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 31 Jul 2024 11:13:46 +0200
Subject: [PATCH] docs(switch): update

---
 docs/content/3.components/checkbox.md |   2 +-
 docs/content/3.components/switch.md   | 152 +++++++++++++++++++++++++-
 docs/nuxt.config.ts                   |   1 +
 3 files changed, 153 insertions(+), 2 deletions(-)

diff --git a/docs/content/3.components/checkbox.md b/docs/content/3.components/checkbox.md
index 9ebc5611..7555e8fb 100644
--- a/docs/content/3.components/checkbox.md
+++ b/docs/content/3.components/checkbox.md
@@ -137,7 +137,7 @@ props:
 
 ### Required
 
-Use the `required` prop to make the Checkbox required.
+Use the `required` prop to make the Checkbox required. This will add an asterisk to the label.
 
 ::component-code
 ---
diff --git a/docs/content/3.components/switch.md b/docs/content/3.components/switch.md
index 32edfd34..775fd998 100644
--- a/docs/content/3.components/switch.md
+++ b/docs/content/3.components/switch.md
@@ -11,7 +11,157 @@ links:
 
 ## Usage
 
-## Examples
+Use the `v-model` directive to control the checked state of the Switch.
+
+::component-code
+---
+external:
+  - modelValue
+ignore:
+  - label
+props:
+  modelValue: true
+  label: Check me
+---
+::
+
+Use the `default-value` prop to set the initial value when you do not need to control its state.
+
+::component-code
+---
+ignore:
+  - label
+props:
+  defaultValue: true
+  label: Check me
+---
+::
+
+### Label
+
+Use the `label` prop to set the label of the Switch.
+
+::component-code
+---
+props:
+  label: Check me
+---
+::
+
+### Description
+
+Use the `description` prop to set the description of the Switch.
+
+::component-code
+---
+ignore:
+  - label
+props:
+  label: Check me
+  description: 'This is a checkbox.'
+---
+::
+
+### Icon
+
+Use the `checked-icon` and `unchecked-icon` props to set the icons of the Switch when checked and unchecked.
+
+::component-code
+---
+prettier: true
+ignore:
+  - label
+  - defaultValue
+props:
+  uncheckedIcon: 'i-heroicons-x-mark'
+  checkedIcon: 'i-heroicons-check'
+  defaultValue: true
+  label: Check me
+---
+::
+
+### Loading
+
+Use the `loading` prop to show a loading icon on the Switch.
+
+Use the `loading-icon` prop to customize this icon. Defaults to `i-heroicons-arrow-path-20-solid`.
+
+::component-code
+---
+ignore:
+  - label
+  - defaultValue
+props:
+  loading: true
+  loadingIcon: ''
+  defaultValue: true
+  label: Check me
+---
+::
+
+::tip
+You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
+::
+
+### Color
+
+Use the `color` prop to change the color of the Switch.
+
+::component-code
+---
+ignore:
+  - label
+  - defaultValue
+props:
+  color: gray
+  defaultValue: true
+  label: Check me
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Switch.
+
+::component-code
+---
+ignore:
+  - label
+  - defaultValue
+props:
+  size: xl
+  defaultValue: true
+  label: Check me
+---
+::
+
+### Required
+
+Use the `required` prop to make the Switch required. This will add an asterisk to the label.
+
+::component-code
+---
+ignore:
+  - label
+props:
+  required: true
+  label: Check me
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Switch.
+
+::component-code
+---
+ignore:
+  - label
+props:
+  disabled: true
+  label: Check me
+---
+::
 
 ## API
 
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 7f45de83..558fbee5 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -132,6 +132,7 @@ export default defineNuxtConfig({
         'UKbd',
         'ULink',
         'UProgress',
+        'USwitch',
         'UTabs',
         'UTextarea',
         'UTooltip'