Skip to content

Switch

Controle de alternância binária para ligar/desligar configurações.

Uso

vue
<script setup lang="ts">
import { Switch } from '@halfbyte/maka'
import { ref } from 'vue'

const ativo = ref(false)
</script>

<template>
  <Switch v-model="ativo" label="Notificações" />
</template>

Exemplos

vue
<Switch label="Desligado" />
<Switch label="Ligado" :model-value="true" />
<Switch label="Desabilitado" :disabled="true" />
<Switch size="sm" color="lime" label="Lime small" :model-value="true" />
<Switch label="Label à esquerda" label-position="left" />

Props

PropTipoPadrão
modelValueboolean
defaultCheckedbooleanfalse
labelstring
labelPosition"right" | "left""right"
size"sm" | "md""md"
color"blue" | "black" | "lime""blue"
disabledbooleanfalse
namestring

Events

EventoPayloadDescrição
update:modelValuebooleanEmitido ao alterar o estado