---

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 @update:modelValue="value = !value" :modelValue="value" />
</template>

<script>
import { BaseSwitch } from '@empathyco/x-components'

export default {
  name: 'BaseSwitchDemo',
  components: {
    BaseSwitch,
  },
  data() {
    return {
      value: 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>
import { BaseSwitch } from '@empathyco/x-components'

export default {
  name: 'BaseSwitchDemo',
  components: {
    BaseSwitch,
  },
  data() {
    return {
      value: false,
    }
  },
}
</script>
```