diff --git a/packages/@headlessui-react/README.md b/packages/@headlessui-react/README.md
index 7d56343..2f6722a 100644
--- a/packages/@headlessui-react/README.md
+++ b/packages/@headlessui-react/README.md
@@ -792,14 +792,15 @@ The `Listbox.Button` will automatically open/close the `Listbox.Options` when cl
 import { useState } from 'react'
 import { Listbox } from '@headlessui/react'
 
+const people = [
+  { id: 1, name: 'Durward Reynolds', unavailable: false },
+  { id: 2, name: 'Kenton Towne', unavailable: false },
+  { id: 3, name: 'Therese Wunsch', unavailable: false },
+  { id: 4, name: 'Benedict Kessler', unavailable: true },
+  { id: 5, name: 'Katelyn Rohan', unavailable: false },
+]
+
 function MyListbox() {
-  const people = [
-    { id: 1, name: 'Durward Reynolds', unavailable: false },
-    { id: 2, name: 'Kenton Towne', unavailable: false },
-    { id: 3, name: 'Therese Wunsch', unavailable: false },
-    { id: 4, name: 'Benedict Kessler', unavailable: true },
-    { id: 5, name: 'Katelyn Rohan', unavailable: false },
-  ]
   const [selectedPerson, setSelectedPerson] = useState(people[0])
 
   return (
@@ -834,14 +835,15 @@ import { useState, Fragment } from 'react'
 import { Listbox } from '@headlessui/react'
 import CheckmarkIcon from './CheckmarkIcon'
 
+const people = [
+  { id: 1, name: 'Durward Reynolds' },
+  { id: 2, name: 'Kenton Towne' },
+  { id: 3, name: 'Therese Wunsch' },
+  { id: 4, name: 'Benedict Kessler' },
+  { id: 5, name: 'Katelyn Rohan' },
+]
+
 function MyListbox() {
-  const people = [
-    { id: 1, name: 'Durward Reynolds' },
-    { id: 2, name: 'Kenton Towne' },
-    { id: 3, name: 'Therese Wunsch' },
-    { id: 4, name: 'Benedict Kessler' },
-    { id: 5, name: 'Katelyn Rohan' },
-  ]
   const [selectedPerson, setSelectedPerson] = useState(people[0])
 
   return (
@@ -849,8 +851,8 @@ function MyListbox() {
       <Listbox.Button>{selectedPerson.name}</Listbox.Button>
       <Listbox.Options>
         {people.map(person => (
-          {/* Use the `active` state to conditionally style the active option. */}
-          {/* Use the `selected` state to conditionally style the selected option. */}
+          /* Use the `active` state to conditionally style the active option. */
+          /* Use the `selected` state to conditionally style the selected option. */
           <Listbox.Option as={Fragment} key={person.id} value={person}>
             {({ active, selected }) => (
               <li className={`${active ? 'bg-blue-500 text-white' : 'bg-white text-black'}`}>
@@ -875,14 +877,15 @@ import { useState, Fragment } from 'react'
 import { Listbox } from '@headlessui/react'
 import CheckmarkIcon from './CheckmarkIcon'
 
+const people = [
+  { id: 1, name: 'Durward Reynolds' },
+  { id: 2, name: 'Kenton Towne' },
+  { id: 3, name: 'Therese Wunsch' },
+  { id: 4, name: 'Benedict Kessler' },
+  { id: 5, name: 'Katelyn Rohan' },
+]
+
 function MyListbox() {
-  const people = [
-    { id: 1, name: 'Durward Reynolds' },
-    { id: 2, name: 'Kenton Towne' },
-    { id: 3, name: 'Therese Wunsch' },
-    { id: 4, name: 'Benedict Kessler' },
-    { id: 5, name: 'Katelyn Rohan' },
-  ]
   const [selectedPerson, setSelectedPerson] = useState(people[0])
 
   return (
@@ -909,14 +912,15 @@ By default, your `Listbox.Options` instance will be shown/hidden automatically b
 import { useState } from 'react'
 import { Listbox } from '@headlessui/react'
 
+const people = [
+  { id: 1, name: 'Durward Reynolds', unavailable: false },
+  { id: 2, name: 'Kenton Towne', unavailable: false },
+  { id: 3, name: 'Therese Wunsch', unavailable: false },
+  { id: 4, name: 'Benedict Kessler', unavailable: true },
+  { id: 5, name: 'Katelyn Rohan', unavailable: false },
+]
+
 function MyListbox() {
-  const people = [
-    { id: 1, name: 'Durward Reynolds', unavailable: false },
-    { id: 2, name: 'Kenton Towne', unavailable: false },
-    { id: 3, name: 'Therese Wunsch', unavailable: false },
-    { id: 4, name: 'Benedict Kessler', unavailable: true },
-    { id: 5, name: 'Katelyn Rohan', unavailable: false },
-  ]
   const [selectedPerson, setSelectedPerson] = useState(people[0])
 
   return (
@@ -942,14 +946,15 @@ If you'd rather handle this yourself (perhaps because you need to add an extra w
 import { useState } from 'react'
 import { Listbox } from '@headlessui/react'
 
+const people = [
+  { id: 1, name: 'Durward Reynolds', unavailable: false },
+  { id: 2, name: 'Kenton Towne', unavailable: false },
+  { id: 3, name: 'Therese Wunsch', unavailable: false },
+  { id: 4, name: 'Benedict Kessler', unavailable: true },
+  { id: 5, name: 'Katelyn Rohan', unavailable: false },
+]
+
 function MyListbox() {
-  const people = [
-    { id: 1, name: 'Durward Reynolds', unavailable: false },
-    { id: 2, name: 'Kenton Towne', unavailable: false },
-    { id: 3, name: 'Therese Wunsch', unavailable: false },
-    { id: 4, name: 'Benedict Kessler', unavailable: true },
-    { id: 5, name: 'Katelyn Rohan', unavailable: false },
-  ]
   const [selectedPerson, setSelectedPerson] = useState(people[0])
 
   return (
@@ -984,14 +989,15 @@ Use the `disabled` prop to disable a `Listbox.Option`. This will make it unselec
 import { useState } from 'react'
 import { Listbox } from '@headlessui/react'
 
+const people = [
+  { id: 1, name: 'Durward Reynolds', unavailable: false },
+  { id: 2, name: 'Kenton Towne', unavailable: false },
+  { id: 3, name: 'Therese Wunsch', unavailable: false },
+  { id: 4, name: 'Benedict Kessler', unavailable: true },
+  { id: 5, name: 'Katelyn Rohan', unavailable: false },
+]
+
 function MyListbox() {
-  const people = [
-    { id: 1, name: 'Durward Reynolds', unavailable: false },
-    { id: 2, name: 'Kenton Towne', unavailable: false },
-    { id: 3, name: 'Therese Wunsch', unavailable: false },
-    { id: 4, name: 'Benedict Kessler', unavailable: true },
-    { id: 5, name: 'Katelyn Rohan', unavailable: false },
-  ]
   const [selectedPerson, setSelectedPerson] = useState(people[0])
 
   return (
@@ -999,7 +1005,7 @@ function MyListbox() {
       <Listbox.Button>{selectedPerson.name}</Listbox.Button>
       <Listbox.Options>
         {people.map(person => (
-          {/* Disabled options will be skipped by keyboard navigation. */}
+          /* Disabled options will be skipped by keyboard navigation. */
           <Listbox.Option key={person.id} value={person} disabled={person.unavailable}>
             <span className={person.unavailable ? 'opacity-75' : ''}>{person.name}</span>
           </Listbox.Option>
@@ -1018,14 +1024,15 @@ To animate the opening/closing of the listbox panel, use the provided `Transitio
 import { useState } from 'react'
 import { Listbox, Transition } from '@headlessui/react'
 
+const people = [
+  { id: 1, name: 'Durward Reynolds', unavailable: false },
+  { id: 2, name: 'Kenton Towne', unavailable: false },
+  { id: 3, name: 'Therese Wunsch', unavailable: false },
+  { id: 4, name: 'Benedict Kessler', unavailable: true },
+  { id: 5, name: 'Katelyn Rohan', unavailable: false },
+]
+
 function MyListbox() {
-  const people = [
-    { id: 1, name: 'Durward Reynolds', unavailable: false },
-    { id: 2, name: 'Kenton Towne', unavailable: false },
-    { id: 3, name: 'Therese Wunsch', unavailable: false },
-    { id: 4, name: 'Benedict Kessler', unavailable: true },
-    { id: 5, name: 'Katelyn Rohan', unavailable: false },
-  ]
   const [selectedPerson, setSelectedPerson] = useState(people[0])
 
   return (
@@ -1070,14 +1077,15 @@ This is easy to change using the `as` prop, which exists on every component.
 import { useState } from 'react'
 import { Listbox } from '@headlessui/react'
 
+const people = [
+  { id: 1, name: 'Durward Reynolds' },
+  { id: 2, name: 'Kenton Towne' },
+  { id: 3, name: 'Therese Wunsch' },
+  { id: 4, name: 'Benedict Kessler' },
+  { id: 5, name: 'Katelyn Rohan' },
+]
+
 function MyListbox() {
-  const people = [
-    { id: 1, name: 'Durward Reynolds' },
-    { id: 2, name: 'Kenton Towne' },
-    { id: 3, name: 'Therese Wunsch' },
-    { id: 4, name: 'Benedict Kessler' },
-    { id: 5, name: 'Katelyn Rohan' },
-  ]
   const [selectedPerson, setSelectedPerson] = useState(people[0])
 
   return (
@@ -1101,14 +1109,15 @@ To tell an element to render its children directly with no wrapper element, use
 import { useState, Fragment } from 'react'
 import { Listbox } from '@headlessui/react'
 
+const people = [
+  { id: 1, name: 'Durward Reynolds' },
+  { id: 2, name: 'Kenton Towne' },
+  { id: 3, name: 'Therese Wunsch' },
+  { id: 4, name: 'Benedict Kessler' },
+  { id: 5, name: 'Katelyn Rohan' },
+]
+
 function MyListbox() {
-  const people = [
-    { id: 1, name: 'Durward Reynolds' },
-    { id: 2, name: 'Kenton Towne' },
-    { id: 3, name: 'Therese Wunsch' },
-    { id: 4, name: 'Benedict Kessler' },
-    { id: 5, name: 'Katelyn Rohan' },
-  ]
   const [selectedPerson, setSelectedPerson] = useState(people[0])
 
   return (
@@ -1134,14 +1143,15 @@ function MyListbox() {
 import { useState } from 'react'
 import { Listbox } from '@headlessui/react'
 
+const people = [
+  { id: 1, name: 'Durward Reynolds' },
+  { id: 2, name: 'Kenton Towne' },
+  { id: 3, name: 'Therese Wunsch' },
+  { id: 4, name: 'Benedict Kessler' },
+  { id: 5, name: 'Katelyn Rohan' },
+]
+
 function MyListbox() {
-  const people = [
-    { id: 1, name: 'Durward Reynolds' },
-    { id: 2, name: 'Kenton Towne' },
-    { id: 3, name: 'Therese Wunsch' },
-    { id: 4, name: 'Benedict Kessler' },
-    { id: 5, name: 'Katelyn Rohan' },
-  ]
   const [selectedPerson, setSelectedPerson] = useState(people[0])
 
   return (
@@ -1161,11 +1171,11 @@ function MyListbox() {
 
 ##### Props
 
-| Prop       | Type                    | Default                                 | Description                                              |
-| ---------- | ----------------------- | --------------------------------------- | -------------------------------------------------------- |
-| `as`       | String \| Component     | `React.Fragment` _(no wrapper element_) | The element or component the `Listbox` should render as. |
-| `value`    | `T` |                              | The selected value.                                      |
-| `onChange` | `(value: T): void`      |                              | The function to call when a new option is selected.      |
+| Prop       | Type                | Default                                 | Description                                              |
+| ---------- | ------------------- | --------------------------------------- | -------------------------------------------------------- |
+| `as`       | String \| Component | `React.Fragment` _(no wrapper element_) | The element or component the `Listbox` should render as. |
+| `value`    | `T`                 |                                         | The selected value.                                      |
+| `onChange` | `(value: T): void`  |                                         | The function to call when a new option is selected.      |
 
 ##### Render prop object
 
@@ -1240,11 +1250,11 @@ function MyListbox() {
 
 ##### Props
 
-| Prop       | Type                    | Default     | Description                                                                             |
-| ---------- | ----------------------- | ----------- | --------------------------------------------------------------------------------------- |
-| `as`       | String \| Component     | `li`        | The element or component the `Listbox.Option` should render as.                         |
-| `value`    | `T` |  | The option value. |
-| `disabled` | Boolean                 | `false`     | Whether or not the option should be disabled for keyboard navigation and ARIA purposes. |
+| Prop       | Type                | Default | Description                                                                             |
+| ---------- | ------------------- | ------- | --------------------------------------------------------------------------------------- |
+| `as`       | String \| Component | `li`    | The element or component the `Listbox.Option` should render as.                         |
+| `value`    | `T`                 |         | The option value.                                                                       |
+| `disabled` | Boolean             | `false` | Whether or not the option should be disabled for keyboard navigation and ARIA purposes. |
 
 ##### Render prop object
 
@@ -1279,11 +1289,15 @@ function NotificationsToggle() {
     <Switch
       checked={enabled}
       onChange={setEnabled}
-      className={`${enabled ? "bg-blue-600" : "bg-gray-200"} relative inline-flex h-6 rounded-full w-8`}
+      className={`${
+        enabled ? 'bg-blue-600' : 'bg-gray-200'
+      } relative inline-flex h-6 rounded-full w-8`}
     >
       <span className="sr-only">Enable notifications</span>
       <span
-        className={`${enabled ? "translate-x-4" : "translate-x-0"} inline-block w-4 h-4 transform bg-white rounded-full`}
+        className={`${
+          enabled ? 'translate-x-4' : 'translate-x-0'
+        } inline-block w-4 h-4 transform bg-white rounded-full`}
       />
     </Switch>
   )
@@ -1309,10 +1323,14 @@ function NotificationsToggle() {
       <Switch
         checked={enabled}
         onChange={setEnabled}
-        className={`${enabled ? "bg-blue-600" : "bg-gray-200"} relative inline-flex h-6 rounded-full w-8`}
+        className={`${
+          enabled ? 'bg-blue-600' : 'bg-gray-200'
+        } relative inline-flex h-6 rounded-full w-8`}
       >
         <span
-          className={`${enabled ? "translate-x-4" : "translate-x-0"} inline-block w-4 h-4 transform bg-white rounded-full`}
+          className={`${
+            enabled ? 'translate-x-4' : 'translate-x-0'
+          } inline-block w-4 h-4 transform bg-white rounded-full`}
         />
       </Switch>
     </Switch.Group>
@@ -1333,19 +1351,18 @@ function NotificationsToggle() {
 
 ##### Props
 
-| Prop       | Type                    | Default                                 | Description                                              |
-| ---------- | ----------------------- | --------------------------------------- | -------------------------------------------------------- |
-| `as`       | String \| Component     | `button` | The element or component the `Switch` should render as. |
-| `checked`    | Boolean |                              | Whether or not the switch is checked.                                      |
-| `onChange` | `(value: boolean): void`      |                              | The function to call when the switch is toggled.      |
+| Prop       | Type                     | Default  | Description                                             |
+| ---------- | ------------------------ | -------- | ------------------------------------------------------- |
+| `as`       | String \| Component      | `button` | The element or component the `Switch` should render as. |
+| `checked`  | Boolean                  |          | Whether or not the switch is checked.                   |
+| `onChange` | `(value: boolean): void` |          | The function to call when the switch is toggled.        |
 
 ##### Render prop object
 
-| Prop   | Type    | Description                         |
-| ------ | ------- | ----------------------------------- |
+| Prop      | Type    | Description                           |
+| --------- | ------- | ------------------------------------- |
 | `checked` | Boolean | Whether or not the switch is checked. |
 
-
 #### Switch.Label
 
 ```jsx
@@ -1359,9 +1376,9 @@ function NotificationsToggle() {
 
 ##### Props
 
-| Prop       | Type                    | Default                                 | Description                                              |
-| ---------- | ----------------------- | --------------------------------------- | -------------------------------------------------------- |
-| `as`       | String \| Component     | `label` | The element or component the `Switch.Label` should render as. |
+| Prop | Type                | Default | Description                                                   |
+| ---- | ------------------- | ------- | ------------------------------------------------------------- |
+| `as` | String \| Component | `label` | The element or component the `Switch.Label` should render as. |
 
 #### Switch.Group
 
@@ -1376,6 +1393,6 @@ function NotificationsToggle() {
 
 ##### Props
 
-| Prop       | Type                    | Default                                 | Description                                              |
-| ---------- | ----------------------- | --------------------------------------- | -------------------------------------------------------- |
-| `as`       | String \| Component     | `React.Fragment` _(no wrapper element)_| The element or component the `Switch.Group` should render as. |
+| Prop | Type                | Default                                 | Description                                                   |
+| ---- | ------------------- | --------------------------------------- | ------------------------------------------------------------- |
+| `as` | String \| Component | `React.Fragment` _(no wrapper element)_ | The element or component the `Switch.Group` should render as. |
diff --git a/packages/@headlessui-vue/README.md b/packages/@headlessui-vue/README.md
index f824cf0..74fef41 100644
--- a/packages/@headlessui-vue/README.md
+++ b/packages/@headlessui-vue/README.md
@@ -400,7 +400,12 @@ The `ListboxButton` will automatically open/close the `ListboxOptions` when clic
   <Listbox v-model="selectedPerson">
     <ListboxButton>{{ selectedPerson.name }}</ListboxButton>
     <ListboxOptions>
-      <ListboxOption v-for="person in people" :key="person.id" :value="person" :disabled="person.unavailable">
+      <ListboxOption
+        v-for="person in people"
+        :key="person.id"
+        :value="person"
+        :disabled="person.unavailable"
+      >
         {{ person.name }}
       </ListboxOption>
     </ListboxOptions>
@@ -434,6 +439,7 @@ export default {
       { id: 5, name: 'Katelyn Rohan', unavailable: false },
     ]
     const selectedPerson = ref(people[0])
+
     return {
       people,
       selectedPerson,
@@ -460,7 +466,13 @@ You can use this state to conditionally apply whatever active/focus styles you l
     <ListboxOptions>
       <!-- Use the `active` state to conditionally style the active option. -->
       <!-- Use the `selected` state to conditionally style the selected option. -->
-      <ListboxOption as="template" v-slot="{ active, selected }" v-for="person in people" :key="person.id" :value="person">
+      <ListboxOption
+        as="template"
+        v-slot="{ active, selected }"
+        v-for="person in people"
+        :key="person.id"
+        :value="person"
+      >
         <li :class="{ 'bg-blue-500 text-white': active, 'bg-white text-black': !active }">
           <CheckmarkIcon v-show="selected" />
           {{ person.name }}
@@ -499,6 +511,7 @@ export default {
       { id: 5, name: 'Katelyn Rohan' },
     ]
     const selectedPerson = ref(people[0])
+
     return {
       people,
       selectedPerson,
@@ -676,7 +689,12 @@ Use the `disabled` prop to disable a `ListboxOption`. This will make it unselect
     <ListboxButton>{{ selectedPerson.name }}</ListboxButton>
     <ListboxOptions>
       <!-- Disabled options will be skipped by keyboard navigation. -->
-      <ListboxOption v-for="person in people" :key="person.id" :value="person" :disabled="person.unavailable">
+      <ListboxOption
+        v-for="person in people"
+        :key="person.id"
+        :value="person"
+        :disabled="person.unavailable"
+      >
         <span :class="{ 'opacity-75': person.unavailable }">{{ person.name }}</span>
       </ListboxOption>
     </ListboxOptions>
@@ -710,6 +728,7 @@ export default {
       { id: 5, name: 'Katelyn Rohan', unavailable: false },
     ]
     const selectedPerson = ref(people[0])
+
     return {
       people,
       selectedPerson,
@@ -723,8 +742,6 @@ export default {
 
 To animate the opening/closing of the menu panel, use Vue's built-in `transition` component. All you need to do is wrap your `ListboxOptions` instance in a `<transition>` element and the transition will be applied automatically.
 
-
-
 ```vue
 <template>
   <Listbox v-model="selectedPerson">
@@ -739,7 +756,12 @@ To animate the opening/closing of the menu panel, use Vue's built-in `transition
       leave-to-class="transform scale-95 opacity-0"
     >
       <ListboxOptions>
-        <ListboxOption v-for="person in people" :key="person.id" :value="person" :disabled="person.unavailable">
+        <ListboxOption
+          v-for="person in people"
+          :key="person.id"
+          :value="person"
+          :disabled="person.unavailable"
+        >
           {{ person.name }}
         </ListboxOption>
       </ListboxOptions>
@@ -774,6 +796,7 @@ export default {
       { id: 5, name: 'Katelyn Rohan', unavailable: false },
     ]
     const selectedPerson = ref(people[0])
+
     return {
       people,
       selectedPerson,
@@ -830,6 +853,7 @@ export default {
       { id: 5, name: 'Katelyn Rohan' },
     ]
     const selectedPerson = ref(people[0])
+
     return {
       people,
       selectedPerson,
@@ -883,6 +907,7 @@ export default {
       { id: 5, name: 'Katelyn Rohan' },
     ]
     const selectedPerson = ref(people[0])
+
     return {
       people,
       selectedPerson,
@@ -892,7 +917,6 @@ export default {
 </script>
 ```
 
-
 ### Component API
 
 #### Listbox
@@ -938,6 +962,7 @@ export default {
       { id: 5, name: 'Katelyn Rohan' },
     ]
     const selectedPerson = ref(people[0])
+
     return {
       people,
       selectedPerson,
@@ -949,10 +974,10 @@ export default {
 
 ##### Props
 
-| Prop      | Type                    | Default                           | Description                                              |
-| --------- | ----------------------- | --------------------------------- | -------------------------------------------------------- |
-| `as`      | String \| Component     | `template` _(no wrapper element_) | The element or component the `Listbox` should render as. |
-| `v-model` | `T` |                        | The selected value.                                      |
+| Prop      | Type                | Default                           | Description                                              |
+| --------- | ------------------- | --------------------------------- | -------------------------------------------------------- |
+| `as`      | String \| Component | `template` _(no wrapper element_) | The element or component the `Listbox` should render as. |
+| `v-model` | `T`                 |                                   | The selected value.                                      |
 
 ##### Slot props
 
@@ -1023,11 +1048,11 @@ export default {
 
 ##### Props
 
-| Prop       | Type                    | Default     | Description                                                                             |
-| ---------- | ----------------------- | ----------- | --------------------------------------------------------------------------------------- |
-| `as`       | String \| Component     | `li`        | The element or component the `ListboxOption` should render as.                          |
-| `value`    | `T` |  | The option value.                                                                     |
-| `disabled` | Boolean                 | `false`     | Whether or not the option should be disabled for keyboard navigation and ARIA purposes. |
+| Prop       | Type                | Default | Description                                                                             |
+| ---------- | ------------------- | ------- | --------------------------------------------------------------------------------------- |
+| `as`       | String \| Component | `li`    | The element or component the `ListboxOption` should render as.                          |
+| `value`    | `T`                 |         | The option value.                                                                       |
+| `disabled` | Boolean             | `false` | Whether or not the option should be disabled for keyboard navigation and ARIA purposes. |
 
 ##### Slot props
 
@@ -1056,7 +1081,7 @@ Switches are built using the `Switch` component. Optionally you can also use the
   <Switch
     as="button"
     v-model="switchValue"
-    class="relative inline-flex h-6 rounded-full w-8"
+    class="relative inline-flex w-8 h-6 rounded-full"
     :class="switchValue ? 'bg-blue-600' : 'bg-gray-200'"
     v-slot="{ checked }"
   >
@@ -1068,8 +1093,8 @@ Switches are built using the `Switch` component. Optionally you can also use the
 </template>
 
 <script>
-import { ref } from "vue";
-import { SwitchGroup, Switch, SwitchLabel } from "@headlessui/vue";
+import { ref } from 'vue'
+import { SwitchGroup, Switch, SwitchLabel } from '@headlessui/vue'
 
 export default {
   components: {
@@ -1078,13 +1103,13 @@ export default {
     SwitchLabel,
   },
   setup() {
-    const switchValue = ref(false);
+    const switchValue = ref(false)
 
     return {
       switchValue,
-    };
+    }
   },
-};
+}
 </script>
 ```
 
@@ -1102,7 +1127,7 @@ Clicking the label will toggle the switch state, like you'd expect from a native
     <Switch
       as="button"
       v-model="switchValue"
-      class="relative inline-flex h-6 rounded-full w-8"
+      class="relative inline-flex w-8 h-6 rounded-full"
       :class="switchValue ? 'bg-blue-600' : 'bg-gray-200'"
       v-slot="{ checked }"
     >
@@ -1115,8 +1140,8 @@ Clicking the label will toggle the switch state, like you'd expect from a native
 </template>
 
 <script>
-import { ref } from "vue";
-import { SwitchGroup, Switch, SwitchLabel } from "@headlessui/vue";
+import { ref } from 'vue'
+import { SwitchGroup, Switch, SwitchLabel } from '@headlessui/vue'
 
 export default {
   components: {
@@ -1125,13 +1150,13 @@ export default {
     SwitchLabel,
   },
   setup() {
-    const switchValue = ref(false);
+    const switchValue = ref(false)
 
     return {
       switchValue,
-    };
+    }
   },
-};
+}
 </script>
 ```
 
@@ -1148,18 +1173,17 @@ export default {
 
 ##### Props
 
-| Prop       | Type                    | Default                                 | Description                                              |
-| ---------- | ----------------------- | --------------------------------------- | -------------------------------------------------------- |
-| `as`       | String \| Component     | `button` | The element or component the `Switch` should render as. |
-| `v-model` | `T` |                        | The switch value. |
+| Prop      | Type                | Default  | Description                                             |
+| --------- | ------------------- | -------- | ------------------------------------------------------- |
+| `as`      | String \| Component | `button` | The element or component the `Switch` should render as. |
+| `v-model` | `T`                 |          | The switch value.                                       |
 
 ##### Slot props
 
-| Prop   | Type    | Description                         |
-| ------ | ------- | ----------------------------------- |
+| Prop      | Type    | Description                           |
+| --------- | ------- | ------------------------------------- |
 | `checked` | Boolean | Whether or not the switch is checked. |
 
-
 #### SwitchLabel
 
 ```html
@@ -1173,9 +1197,9 @@ export default {
 
 ##### Props
 
-| Prop       | Type                    | Default                                 | Description                                              |
-| ---------- | ----------------------- | --------------------------------------- | -------------------------------------------------------- |
-| `as`       | String \| Component     | `label` | The element or component the `SwitchLabel` should render as. |
+| Prop | Type                | Default | Description                                                  |
+| ---- | ------------------- | ------- | ------------------------------------------------------------ |
+| `as` | String \| Component | `label` | The element or component the `SwitchLabel` should render as. |
 
 #### SwitchGroup
 
@@ -1190,6 +1214,6 @@ export default {
 
 ##### Props
 
-| Prop       | Type                    | Default                                 | Description                                              |
-| ---------- | ----------------------- | --------------------------------------- | -------------------------------------------------------- |
-| `as`       | String \| Component     | `template` _(no wrapper element)_| The element or component the `SwitchGroup` should render as. |
+| Prop | Type                | Default                           | Description                                                  |
+| ---- | ------------------- | --------------------------------- | ------------------------------------------------------------ |
+| `as` | String \| Component | `template` _(no wrapper element)_ | The element or component the `SwitchGroup` should render as. |