---
github: true
headlessui:
  label: 'Switch'
  to: 'https://headlessui.com/vue/switch'
---

## Usage

::component-card
::

### Icon

Use any icon from [Iconify](https://icones.js.org) by setting the `icon-on` and `icon-off` props by using this pattern: `i-{collection_name}-{icon_name}`.

::component-card
---
props:
  iconOn: 'i-heroicons-check-20-solid'
  iconOff: 'i-heroicons-x-mark-20-solid'
excludedProps:
  - iconOn
  - iconOff
---
::

## Props

:component-props

## Preset

:component-preset