---

title: BaseSwitch

---

# BaseSwitch

Basic switch component to handle boolean values. This component receives
its selected state using a prop, and emits a Vue event whenever the user
clicks it.

## Props

| Name                    | Description | Type                 | Default            |
| ----------------------- | ----------- | -------------------- | ------------------ |
| <code>modelValue</code> |             | <code>boolean</code> | <code>false</code> |

## Events

| Event name        | Properties | Description |
| ----------------- | ---------- | ----------- |
| update:modelValue |            |

## Events

This component emits no events.

## See it in action

Here you have a basic example of how the switch is rendered.

_Try clicking it to see how it changes its state_

```vue live
<template>
  <BaseSwitch v-model="value" />
</template>

<script setup>
import { BaseSwitch } from "@empathyco/x-components";
import { ref } from "vue";
const value = ref(false);
</script>
```

The switch component also supports using the `v-model` directive, to automatically handle its state
change:

```vue live
<template>
  <BaseSwitch v-model="value" />
</template>

<script setup>
import { BaseSwitch } from "@empathyco/x-components";
import { ref } from "vue";
const value = ref(false);
</script>
```