Switch

Alterna um estado binário (ligado/desligado) com resposta imediata. v-model aceita boolean. Consome o DNA dos Fundamentos (04 Forma · interactive.pill na trilha e na bolinha · 01 Cor · action/border, 06 Movimento · padrão toggle).

Componente Arrow

Este componente foi elevado ao padrão Arrow — reescrito sobre os Fundamentos, consumindo o DNA de tokens (cor, tipografia, forma, espaço, movimento) sem valor solto, com API limpa, acessibilidade e render validado. O selo no card confirma: virou Arrow de verdade.

Playground

Importação

import { Switch } from '@arrow/components-vue'

Uso básico

Receber notificações

<script setup>
import { ref } from 'vue'
const notif = ref(true)
</script>

<template>
  <Switch v-model="notif" label="Receber notificações" />
</template>

Estados

DesligadoLigadoDesabilitado (off)Desabilitado (on)

<Switch :model-value="false" label="Desligado" />
<Switch :model-value="true" label="Ligado" />
<Switch :model-value="false" disabled label="Desabilitado (off)" />
<Switch :model-value="true" disabled label="Desabilitado (on)" />

Tamanho · size

sm (trilha 28×16) · md (36×20, padrão).

SmallMedium

<Switch v-model="sm" size="sm" label="Small" />
<Switch v-model="md" size="md" label="Medium" />

Sem label visível

Sem label, forneça um aria-label — ele cai no <input> interno (o elemento role="switch") para leitores de tela.

<Switch v-model="escuro" aria-label="Ativar modo escuro" />

API

Props

Prop	Tipo	Padrão	Descrição
modelValue	boolean	false	Estado ligado/desligado. Use com v-model.
label	string	—	Texto ao lado do switch. Alternativa ao slot default.
disabled	boolean	false	Desabilita a interação (atributo nativo).
size	'sm' | 'md'	'md'	Tamanho: 28×16 / 36×20 px.

Eventos

Evento	Payload	Descrição
update:modelValue	boolean	v-model — emitido ao alternar.

Slots

Nome	Descrição
default	Conteúdo do label (tem prioridade sobre label).

Atributos repassados

Qualquer atributo HTML (aria-label, aria-labelledby, id, name…) é aplicado no <input> interno (inheritAttrs: false). Logo, name participa de submissões nativas de <form> de fábrica — sem prop dedicada.

Acessibilidade

• <input type="checkbox" role="switch"> nativo (oculto, mas focável) — teclado e leitores de tela anunciam como switch; o estado vai no checked nativo.
• :focus-visible com anel de 3px na trilha (color.state.focus-ring).
• O <label> envolve tudo → clicar no texto também alterna.
• Sem label visível, use aria-label/aria-labelledby (caem no input).

Migração do MeSwitch

• size 'standard' | 'small' → 'md' | 'sm' (alinha com Checkbox/IconButton; md é a âncora).
• Forma preservada: trilha em pílula + bolinha circular (shape.interactive.pill), como no legado.
• name (prop) → atributo repassado. Passe name="x" direto; cai no input nativo (form funciona igual).
• labelPosition (top/right/bottom/left) → removido. Label sempre à direita (consistente com o Checkbox). Reavaliar se houver demanda real.
• labelProps (mandatory/tooltip via MeLabel) → removido. Label é texto simples (type.body.sm); sem acoplar ao MeLabel legado.
• change → use update:modelValue (o v-model idiomático).
• disabled agora é nativo (não aria-disabled): o switch desabilitado sai do tab order, como os demais inputs do Arrow.