@empathyco/x-components
Version:
Empathy X Components
61 lines (42 loc) • 1.31 kB
Markdown
---
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>
```