huanld/headlessui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: improve documentation (#91)

Browse Source 
* format README's with Prettier

* hoist people list

otherwise the reference will never be the same when you select a new item. Alternative could be to put it in a ref or useMemo or something.

* make whitespace consistent
This commit is contained in:
Robin Malfait
2020-10-12 13:58:54 +02:00
committed by GitHub
parent 5bb7df9d93
commit 53776af89e
2 changed files with 183 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/@headlessui-react/README.md
+118 -101
View File
@@ -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. |
packages/@headlessui-vue/README.md
+65 -41
View File
@@ -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. |