Update docs

Author: rawilk

docs/_index.md

@@ -1,5 +1,5 @@
 ---
-title: v2
+title: v3
 slogan: A set of Blade components for TailwindCSS forms.
 githubUrl: https://github.com/rawilk/laravel-form-components
 branch: master

docs/components/custom-select.md

@@ -12,10 +12,10 @@ custom option markup while still providing usability functionalities such as key
 ## Installation
 
 The custom select component requires Alpine.js, as well as some custom JavaScript written into the package to work.
-Ensure you have the proper [directives](/docs/laravel-form-components/v2/installation#directives) in your layout file.
+Ensure you have the proper [directives](/docs/laravel-form-components/v3/installation#directives) in your layout file.
 In production, we recommend you install and compile the JavaScript libraries before you deploy:
 
-- [Alpine.js](https://github.com/alpinejs/alpine) `^2.7`
+- [Alpine.js](https://github.com/alpinejs/alpine) `^2.8`
 
 ## Basic Usage
 
@@ -237,4 +237,4 @@ it is opened.
 ## Addons
 
 The custom select component supports leading addons, but since there are already elements appended to the end
-of the button trigger, trailing addons are not supported. For more information on addons, see [the input documentation](/docs/laravel-form-components/v2/components/input#addons).
+of the button trigger, trailing addons are not supported. For more information on addons, see [the input documentation](/docs/laravel-form-components/v3/components/input#addons).

docs/components/date-picker.md

@@ -10,10 +10,10 @@ By using it, you can simply add a date and/or time picker to your form with one
 
 ## Installation
 
-While the `date-picker` component works out-of-the-box when you've [set the directives](/docs/laravel-form-components/v2/installation#directives),
+While the `date-picker` component works out-of-the-box when you've [set the directives](/docs/laravel-form-components/v3/installation#directives),
 we recommend that you install and compile the JavaScript libraries before you deploy to production:
 
-- [Alpine.js](https://github.com/alpinejs/alpine) `^2.7`
+- [Alpine.js](https://github.com/alpinejs/alpine) `^2.8`
 - [Flatpickr](https://flatpickr.js.org/) `4.6.3`
 
 Make sure you import flatpickr as `flatpickr` in your JavaScript, and make sure it's available globally:
@@ -157,4 +157,4 @@ For more information on the callbacks available, please consult [the events api]
 Like the other inputs, the date picker can also have leading and trailing addons, however by default you cannot add them.
 To add leading addons, you must disable the toggle icon, and for trailing addons, you must set `clearable` to `false`.
 
-See the [input documentation](/docs/laravel-form-components/v2/components/input#addons) for more information.
+See the [input documentation](/docs/laravel-form-components/v3/components/input#addons) for more information.

docs/components/email.md

@@ -28,4 +28,4 @@ This will output:
 By default an `email` type will be set for the input field as well as an `id` that allows it to be
 easily referenced by a `label` element.
 
-Besides this, the email element behaves exactly the same as the [input component](/docs/laravel-form-components/v2/components/input).
+Besides this, the email element behaves exactly the same as the [input component](/docs/laravel-form-components/v3/components/input).

docs/components/file-upload.md

@@ -13,7 +13,7 @@ as well just by adding a `wire:model` to the input.
 Even though the `file-upload` component will work out-of-the-box if you're using the script blade directives in your layout (`@fcScripts`),
 we recommend that you install and compile the JavaScript libraries before you deploy to production.
 
-- [Alpine.js](https://github.com/alpinejs/alpine) `^2.7`
+- [Alpine.js](https://github.com/alpinejs/alpine) `^2.8`
 
 ## Basic Usage
 

docs/components/filepond.md

@@ -10,10 +10,10 @@ Before using this component, we recommend familiarizing yourself with the FilePo
 
 ## Installation
 
-While the `file-pond` component works out-of-the-box when you've [set the directive](/docs/laravel-form-components/v2/installation#directives),
+While the `file-pond` component works out-of-the-box when you've [set the directive](/docs/laravel-form-components/v3/installation#directives),
 we recommend that you install and compile the JavaScript libraries before you deploy to production:
 
-- [Alpine.js](https://github.com/alpinejs/alpine) `^2.7`
+- [Alpine.js](https://github.com/alpinejs/alpine) `^2.8`
 - [FilePond](https://pqina.nl/filepond/) `^4.21`
 
 As per the [FilePond docs](https://pqina.nl/filepond/docs/patterns/installation/), you can install FilePond via npm:

docs/components/input.md

@@ -80,7 +80,7 @@ When there are errors for a field, the `aria-invalid` and `aria-describedby` att
 ```
 
 The actual error message won't be rendered from the input component itself, but it can be automatically rendered for you
-by wrapping the `<x-input />` component inside of a `<x-form-group />` component. Please refer to the [form-group documentation](/docs/laravel-form-components/v2/components/form-group#error-handling) for more information.
+by wrapping the `<x-input />` component inside of a `<x-form-group />` component. Please refer to the [form-group documentation](/docs/laravel-form-components/v3/components/form-group#error-handling) for more information.
 
 The `aria-describedby` attribute takes the `name` attribute and appends `-error` to it, which will be the id given to the error message rendered by the `<x-form-group />` component. If you already have `aria-describedby` set on the input, the attribute
 value will be merged with the error attribute value.

docs/components/password.md

@@ -111,4 +111,4 @@ Like the other inputs, the password input can also have leading addons, but sinc
 includes a password toggle as a trailing icon addon, you are not able to add a trailing addon
 to the password input. If you need a trailing addon, you should use the input component instead.
 
-See the [input documentation](/docs/laravel-form-components/v2/components/input#addons) for more information.
+See the [input documentation](/docs/laravel-form-components/v3/components/input#addons) for more information.

docs/components/select.md

@@ -173,5 +173,5 @@ This will output:
 
 ## Reference
 
-Since the select component extends the [input component](/docs/laravel-form-components/v2/components/input), you are able
+Since the select component extends the [input component](/docs/laravel-form-components/v3/components/input), you are able
 to do a lot of the same things you can with the input element, such as error handling and addons.

docs/components/switch-toggle.md

@@ -0,0 +1,143 @@
+---
+title: Switch Toggle
+sort: 18
+---
+
+## Introduction
+
+The `switch-toggle` component offers an easy alternative to a traditional checkbox and is heavily based on
+the [Tailwind UI toggle component](https://tailwindui.com/components/application-ui/forms/toggles). The
+switch toggle acts like a checkbox, however it allows for an "off" value and an "on" value; see [custom on and off values](#custom-on-and-off-values)
+for more info.
+
+## Installation
+
+While the `switch-toggle` component works out-of-the-box when you've [set the directive](/docs/laravel-form-components/v3/installation#directives),
+we recommend that you install and compile the JavaScript libraries before you deploy to production:
+
+- [Alpine.js](https://github.com/alpinejs/alpine) `^2.8`
+
+## Basic Usage
+
+The most basic usage of the component is just by calling it:
+
+```html
+<x-switch-toggle />
+```
+
+This will render a toggle element similar to the example shown for the "Simple toggle" on [Tailwind UI](https://tailwindui.com/components/application-ui/forms/toggles).
+
+## Labels
+
+You can easily add a label to the switch toggle by using the `label` attribute:
+
+```html
+<x-switch-toggle label="Notifications on" />
+```
+
+This will render a label containing the text "Notifications on" to the right side of the switch.
+
+### Left aligned labels
+
+You can also render labels on the left of switch by setting `label-position` to `left`:
+
+```html
+<x-switch-toggle label="Notifications on" label-position="left" />
+```
+
+Now "Notifications on" will be rendered to the left of the switch.
+
+## Handling values
+
+The switch toggle component offers support for both `wire:model` and `wire:model.defer` right out of the box, and is the recommended way
+to use this component when you are using Laravel Livewire. Behind-the-scenes, the component will use the `@entangle` blade directive
+from livewire to bind the value to a local variable on the component.
+
+```html
+<x-switch-toggle wire:model.defer="allowNotifications" label="Notifications on" />
+```
+
+For non-livewire forms, you may also give the component a `value` to use for the initial value, but be sure to include a `name` attribute so that your server
+can receive the value from the switch in a normal form submission.
+
+```html
+<x-switch-toggle name="foo" :value="true" />
+```
+
+When the component is given a name attribute, it will render a hidden input so that the current value of the component is passed on to the server via a form submission.
+The hidden input rendered from the example above will look like this:
+
+```html
+<input type="hidden" name="foo" x-bind:value="JSON.stringify(value)" />
+```
+
+### Custom on and off values
+
+The switch toggle is not limited to `true` and `false` values for its respective "on" and "off" values; it can use strings and integer values as well:
+
+```html
+<x-switch-toggle on-value="foo" off-value="bar" />
+```
+
+Now when the switch is "off", the value will be "bar", and when it is "on", the value will be "foo".
+
+## Variations
+
+Different size and style variations of the switch may be rendered out-of-the-box:
+
+### Short Toggle
+
+Based on the [short toggle](https://tailwindui.com/components/application-ui/forms/toggles#component-b3e0a15571300f79fced5845f97fa972) example from
+Tailwind UI, the short toggle will make the size of the circle on the bar larger than the height of the bar. All you need to do for this style is set
+the `short` flag to `true`:
+
+```html
+<x-switch-toggle short />
+```
+
+### Sizing
+
+Both the simple and short toggle variations allow for different sizing out-of-the-box. Simply pass in a `size` to the component to re-size it:
+
+```html
+<x-switch-toggle size="lg" />
+```
+
+Here are the sizes the package provides by default for each variation:
+
+**Simple**:
+- sm
+- base (default)
+- lg
+
+**Short**:
+- base (default)
+- lg
+
+These sizes also come in responsive variants, so if you wanted the switch small on small screens, but large on larger screens, you could do something like this:
+
+```html
+<x-switch-toggle class="switch-toggle--sm lg:switch-toggle--lg" />
+```
+
+You are free to add your own sizes in your own stylesheets. Just reference the [switch toggle styles](https://github.com/rawilk/laravel-form-components/blob/master/resources/sass/utils/_switch.scss#L126) for guidance.
+
+## Icons
+
+Based on the [toggle with icon](https://tailwindui.com/components/application-ui/forms/toggles#component-bcaf782196186836b6ea686e7096e734) from Tailwind UI, the switch
+toggle component allows you to specify icons to display on the button for both "on" and "off" states:
+
+```html
+<x-switch-toggle>
+    <x-slot name="offIcon">
+        <x-heroicon-s-x class="w-3 h-3 text-gray-400" />
+    </x-slot>
+    
+    <x-slot name="onIcon">
+        <x-heroicon-s-check class="w-3 h-3 text-blue-600" />
+    </x-slot>
+</x-switch-toggle>
+```
+
+In this example, you will see an "x" icon when the switch is "off", and a checkmark icon when the switch is "on". **Note:** This example requires the 
+[blade heroicon](https://github.com/blade-ui-kit/blade-heroicons) package.