---

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>
```