Toggle Group

Grupo de botões de alternância para seleção única ou múltipla.

Uso

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

const alinhamento = ref(['left'])

const items = [
  { value: 'left',   label: 'Esq' },
  { value: 'center', label: 'Centro' },
  { value: 'right',  label: 'Dir' },
]
</script>

<template>
  <ToggleGroup v-model="alinhamento" :items="items" />
</template>

Exemplos

<!-- Múltipla seleção -->
<ToggleGroup :items="items" :multiple="true" v-model="vals" />

<!-- Vertical -->
<ToggleGroup :items="items" orientation="vertical" v-model="val" />

Props

Prop	Tipo	Padrão
items	ToggleGroupItem[]	obrigatório
modelValue	string | string[]	—
multiple	boolean	false
disabled	boolean	false
orientation	"horizontal" | "vertical"	"horizontal"
size	"sm" | "md" | "lg"	"md"

ToggleGroupItem

Campo	Tipo	Descrição
value	string	Identificador único
label	string	Texto exibido (opcional)
disabled	boolean	Desabilita o item (opcional)

Slots

Slot	Descrição
{value}	Conteúdo customizado para o item de dado valor

Events

Evento	Payload	Descrição
update:modelValue	string[]	Emitido ao alterar a seleção