docs: documentation for the Switch component

packages/chakra-ui-docs/docs/switch.mdx

@@ -1 +1,66 @@
-# Switch
+import SEO from '../components/SEO'
+
+<SEO
+  title="Switch"
+  description="The Switch component is used as an alternative for the Checkbox component, switch between enabled or disabled states."
+/>
+
+# Switch
+
+The Switch component is used as an alternative for the [Checkbox](/checkbox) component, switch between enabled or disabled states.
+
+Switch must always be accompanied by a label, and follows the same keyboard workflow as a checkbox.
+
+## Import
+
+```js
+import { CSwitch } from '@chakra-ui/vue'
+```
+
+## Usage
+
+```vue live=true
+<c-form-control>
+    <c-form-label html-for="email-alerts">Enable email alerts?</c-form-label>
+    <c-switch id="email-alerts" />
+</c-form-control>
+```
+
+## Sizes
+
+Pass the size prop to change the `size` of the switch.
+
+```vue live=true
+<c-stack align="center" is-inline>
+  <c-switch size="sm" />
+  <c-switch size="md" />
+  <c-switch size="lg" />
+</c-stack>
+```
+
+## Switch background color
+
+You can change the checked background color of the switch by passing the `color` prop.
+
+```vue live=true
+<c-stack is-inline>
+  <c-switch color="vue" />
+  <c-switch color="red" size="lg" />
+</c-stack>
+```
+
+## Props
+
+| Name               | Type                | Default | Description                                          |
+| ------------------ | ------------------- | ------- | ---------------------------------------------------- |
+| `size`             | `sm`, `md`, `lg`    |         | The size of the switch.                              |
+| `color`            | `string`            |         | The background color of the switch when checked.     |
+| `name`             | `string`            |         | The input name of the switch when used in a form.    |
+| `value`            | `string`, `boolean` |         | The value of the switch.                             |
+| `children`         | `React.ReactNode`   |         | The children of the switch.                          |
+| `aria-label`       | `string`            |         | The aria-label of the switch for accessibility.      |
+| `aria-labelledby`  | `string`            |         | The aria-labelledby of the switch for accessibility. |
+| `isChecked`        | `boolean`           |         | If `true`, set the switch to the checked state.      |
+| `defaultIsChecked` | `boolean`           |         | If `true`, the checkbox will be initially checked.   |
+| `isDisabled`       | `boolean`           |         | If `true`, set the disabled to the invalid state.    |
+| `isInvalid`        | `boolean`           |         | If `true`, set the switch to the invalid state.      |