Vitral 0.2
Formulário

RadioButton

Radios nativos sob anéis desenhados, agrupados pelo RadioGroup com um só name e um só v-model.

Testado com WAI-ARIA

Importação

main.ts
import { RadioButton } from '@vitral/vue';

Radio group

Entre no grupo com Tab e depois use as setas.

Delivery
Value: standard
<script setup lang="ts">import { RadioButton, RadioGroup, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const delivery = ref('standard');</script> <template>    <StackPanel spacing="1rem">        <small id="rb-delivery" style="color: var(--vt-text-muted-color)">Delivery</small>        <RadioGroup v-model="delivery" aria-labelledby="rb-delivery">            <RadioButton value="standard" label="Standard (5–7 days)" />            <RadioButton value="express" label="Express (2 days)" />            <RadioButton value="pickup" label="Pick up in store" />            <RadioButton value="drone" label="Drone" disabled />        </RadioGroup>        <small style="color: var(--vt-text-muted-color)">Value: {{ delivery }}</small>    </StackPanel></template>

Horizontal, com valores objeto

Plan
Value: { "id": "pro", "name": "Pro", "price": 12 }
<script setup lang="ts">import { RadioButton, RadioGroup, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const plans = [    { id: 'free', name: 'Free', price: 0 },    { id: 'pro', name: 'Pro', price: 12 },    { id: 'team', name: 'Team', price: 30 }];const plan = ref<(typeof plans)[number] | null>(plans[1]!);</script> <template>    <StackPanel spacing="1rem">        <small id="rb-plan" style="color: var(--vt-text-muted-color)">Plan</small>        <RadioGroup v-model="plan" orientation="horizontal" aria-labelledby="rb-plan">            <RadioButton v-for="p in plans" :key="p.id" :value="p">{{ p.name }} <small style="color: var(--vt-text-muted-color)">${{ p.price }}/mo</small></RadioButton>        </RadioGroup>        <small style="color: var(--vt-text-muted-color)">Value: {{ plan }}</small>    </StackPanel></template>

Inválido e tamanhos

Size (required)
<script setup lang="ts">import { RadioButton, RadioGroup, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const size = ref<string | null>(null);</script> <template>    <StackPanel spacing="1rem">        <small id="rb-size" style="color: var(--vt-text-muted-color)">Size (required)</small>        <RadioGroup v-model="size" orientation="horizontal" aria-labelledby="rb-size" :invalid="size === null">            <RadioButton value="s" label="Small" size="small" />            <RadioButton value="m" label="Medium" />            <RadioButton value="l" label="Large" size="large" />        </RadioGroup>    </StackPanel></template>

Sem grupo

Radios avulsos compartilham um grupo pelo `name`.

<script setup lang="ts">import { RadioButton } from '@vitral/vue';import { ref } from 'vue'; const theme = ref('light');</script> <template>    <RadioButton v-model="theme" value="light" name="rb-theme" label="Light" />    <RadioButton v-model="theme" value="dark" name="rb-theme" label="Dark" />    <RadioButton model-value="on" value="on" name="rb-disabled" label="Disabled checked" disabled /></template>

API

Lido de packages/vue/src/components/RadioButton/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
valueanyO que o v-model vira quando este radio é escolhido; comparado pela estrutura, então objetos funcionam.
namestringRadios com o mesmo nome são um só grupo para o navegador. Um RadioGroup o fornece.
labelstringO texto ao lado do anel; o slot padrão aceita conteúdo mais rico. Qualquer um vira o seu `<label>`.
sizeSize—
invalidboolean—
disabledboolean—

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
changeevent: RadioButtonChangeEvent—
focusevent: FocusEvent—
blurevent: FocusEvent—

Slots

NomeProps do slotDescrição
default—O conteúdo do rótulo.

Usado nestes templates