Switch
Model-value
Controls the on/off state of the switch.
Value: false
Value: off
Value: 1
<script setup lang="ts">
import { NmorphSwitch } from "@nmorph/nmorph-ui-kit";
const firstSwitch = ref(false);
const secondSwitch = ref("off");
const thirdSwitch = ref(1);
</script><template>
<div class="switch-model-value-overview">
<div class="switch-el">
<p class="switch-value nmorph-title-3">Value: {{ firstSwitch }}</p>
<NmorphSwitch v-model="firstSwitch" />
</div>
<div class="switch-el">
<p class="switch-value nmorph-title-3">Value: {{ secondSwitch }}</p>
<NmorphSwitch
v-model="secondSwitch"
active-value="on"
inactive-value="off"
/>
</div>
<div class="switch-el">
<p class="switch-value nmorph-title-3">Value: {{ thirdSwitch }}</p>
<NmorphSwitch
v-model="thirdSwitch"
:active-value="1"
:inactive-value="0"
/>
</div>
</div>
</template>Loading
Displays the loading state on the switch if set to true.
<script setup lang="ts">
import { NmorphSwitch } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="switch-loading-overview">
<NmorphSwitch loading disabled />
</div>
</template>Disabled
Disables the switch if set to true.
<script setup lang="ts">
import { NmorphSwitch } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="switch-disabled-overview">
<NmorphSwitch disabled />
</div>
</template>