Radio Group

Grupo de opções de seleção exclusiva.

Uso

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

const plano = ref('mensal')

const opcoes = [
  { value: 'mensal', label: 'Mensal' },
  { value: 'anual', label: 'Anual' },
]
</script>

<template>
  <RadioGroup v-model="plano" :options="opcoes" label="Plano" />
</template>

Exemplos

<RadioGroup v-model="valor" :options="opcoes" label="Vertical" />
<RadioGroup v-model="valor" :options="opcoes" orientation="horizontal" />
<RadioGroup v-model="valor" :options="opcoes" size="lg" color="lime" />
<RadioGroup v-model="valor" :options="opcoes" :disabled="true" />

Props

Prop	Tipo	Padrão
options	RadioOption[]	obrigatório
modelValue	string	—
defaultValue	string	—
label	string	—
orientation	"vertical" | "horizontal"	"vertical"
size	"sm" | "md" | "lg"	"md"
color	"blue" | "black" | "lime"	"blue"
disabled	boolean	false
name	string	—

RadioOption

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

Events

Evento	Payload	Descrição
update:modelValue	string	Emitido ao selecionar uma opção