BaseRadioGroup e BaseRadio

Escolha de uma única opção entre poucas, todas visíveis. BaseRadioGroup dá a pergunta, a ajuda e o erro; cada BaseRadio é uma opção. As opções do grupo compartilham o mesmo name e o mesmo v-model sem configuração.

Lei de licitação *

Lei 14.133/2021Lei 8.666/1993

Define o limite de aditivo do contrato.

Tipo de obra (opcional)

Obra novaReformaManutenção

Valor escolhido: 14133

Uso

• Use para escolher uma opção entre duas e sete, quando ver todas ajuda a decidir. Com mais opções, use uma lista de seleção.
• Para várias escolhas ao mesmo tempo, use caixas de seleção. Para ligar e desligar algo com efeito imediato, use um interruptor.
• O rótulo do grupo é a pergunta ("Lei de licitação"); o rótulo da opção é a resposta, curto e sem pontuação final.
• Ordene as opções de forma lógica: a mais comum primeiro, ou em ordem natural (tempo, tamanho).
• Deixe uma opção marcada quando houver um padrão seguro. Sem padrão, comece sem nenhuma e marque o grupo como required.
• orientation="horizontal" só para duas ou três opções curtas. Em telas estreitas as opções quebram linha sozinhas.

Estados

Inválido *

Lei 14.133/2021Lei 8.666/1993

Escolha a lei que rege o contrato

Aviso

Lei 14.133/2021Lei 8.666/1993

A Lei 8.666/1993 não vale para contratos novos

Somente leitura

Lei 14.133/2021Lei 8.666/1993

Desabilitado

Lei 14.133/2021Lei 8.666/1993

Uma opção desabilitada

Obra novaEmergencial (sem permissão)

• Somente leitura mostra a escolha sem permitir mudança. As opções continuam no foco do teclado e legíveis.
• Inválido sempre mostra texto e ícone. Sem invalid-text, aparece "Escolha uma opção"; prefira uma mensagem que diga o que corrigir.
• Aviso só aparece com warn-text. Com invalid e warn ao mesmo tempo, vale o erro.
• Desabilitado é para quando a escolha não se aplica agora. Diga perto do campo por quê.

Estilo

Propriedade	Token
Círculo	16 px, borda 1,5 px --tj-border-strong-02, fundo --tj-field-01
Marcado	ponto --tj-interactive, borda --tj-border-interactive
Hover	borda --tj-border-interactive
Hover marcado	ponto e borda --tj-interactive-hover
Pressionado	borda --tj-interactive-active; marcado, ponto --tj-interactive-active
Foco	contorno sólido de 2 px --tj-border-interactive, afastado 2 px (no erro, --tj-support-error-text)
Erro	borda --tj-support-error-text, mensagem --tj-support-error-text
Aviso	borda --tj-support-warning-text, mensagem --tj-support-warning-text
Somente leitura	borda tracejada --tj-border-strong-01, ponto --tj-icon-primary
Desabilitado	fundo --tj-field-disabled, borda --tj-border-subtle-02, ponto --tj-icon-secondary, texto --tj-text-helper (igual a BaseCheckbox e BaseSwitch)
Rótulo do grupo	--tj-text-secondary, --tj-text-sm, semibold
Texto da opção	--tj-text-primary, --tj-text-md
Espaço entre opções	--tj-space-2 na vertical; --tj-space-6 entre colunas na horizontal
Área de clique	rótulo inteiro até o fim do texto, altura mínima --tj-space-6 (24 px)
Movimento	--tj-duration-fast-02, --tj-easing-standard; desligado com prefers-reduced-motion

Diferenças em relação ao protótipo v3: a área de clique subiu de 20 px para 24 px (WCAG 2.5.8), e o espaço vertical entre opções é --tj-space-2 em vez de --tj-space-3, porque a área maior já separa as opções. O foco usa contorno sólido porque o halo translúcido de --tj-ring fica fraco demais num círculo de 16 px. Não há size: o círculo de 16 px com área de 24 px já é o mínimo acessível, e uma versão menor ficaria abaixo dele.

Código

<BaseRadioGroup v-model="lei" label="Lei de licitação" :invalid="erro" invalid-text="Escolha a lei que rege o contrato" required>
  <BaseRadio value="14133" label="Lei 14.133/2021" />
  <BaseRadio value="8666" label="Lei 8.666/1993" />
</BaseRadioGroup>

BaseRadioGroup

Propriedade	Tipo	Padrão	Descrição
v-model	string	—	Valor da opção marcada; undefined quando nenhuma está marcada
label	string	—	Pergunta do grupo (obrigatório), vira a legenda
name	string	gerado	Nome do campo no formulário, igual para todas as opções
orientation	'vertical' | 'horizontal'	'vertical'	Opções em coluna ou em linha
helperText	string	—	Ajuda abaixo das opções
invalid / invalidText	boolean / string	— / 'Escolha uma opção'	Erro, no lugar da ajuda
warn / warnText	boolean / string	—	Aviso, no lugar da ajuda; sem warnText não aparece
required / optional	boolean	—	Marca na legenda
disabled	boolean	—	Desabilita todas as opções
readonly	boolean	—	Mostra a escolha sem permitir mudança; tira o required nativo das opções, como o navegador faz com campo somente leitura
hideLabel	boolean	—	Legenda só para leitor de tela

Evento: update:modelValue com o value da opção escolhida.

BaseRadio

Propriedade	Tipo	Descrição
value	string	Valor gravado no v-model do grupo (obrigatório)
label	string	Texto da opção; o slot padrão substitui para conteúdo mais rico
disabled	boolean	Desabilita só esta opção

BaseRadio só funciona dentro de um BaseRadioGroup; fora dele, o componente avisa com um erro.

Não coloque BaseRadioGroup dentro de BaseField: o grupo já tem legenda, ajuda e erro, e o BaseField criaria um segundo rótulo apontando para nenhum campo.

Acessibilidade

Segue o padrão Radio Group do WAI-ARIA APG.

• O grupo é um <fieldset role="radiogroup"> com <legend>; o leitor de tela anuncia a pergunta ao entrar no grupo.
• Cada opção é um <input type="radio"> nativo dentro do próprio <label>: clicar no texto marca a opção.
• Teclado: Tab entra no grupo pela opção marcada; sem opção marcada, pela primeira habilitada (ou pela última com Shift+Tab) e sai dele; as setas movem e marcam a opção seguinte ou a anterior; Espaço marca a opção em foco.
• Ajuda, erro e aviso ficam em aria-describedby de cada opção, como no BaseInput, para o leitor de tela ler a mensagem quando o foco chega a uma opção. Com erro, o grupo recebe aria-invalid="true"; a cor nunca é o único sinal, há sempre ícone e texto.
• required marca o grupo com aria-required e as opções com required. O asterisco fica escondido do leitor de tela.
• Somente leitura usa aria-readonly e borda tracejada: as opções seguem focáveis e anunciadas, mas a escolha não muda, nem por clique nem pelas setas.
• O foco é um contorno sólido de 2 px com contraste de pelo menos 3:1, em tema claro e escuro.
• Em alto contraste do Windows (forced-colors), círculo, ponto e foco usam as cores do sistema (Canvas, CanvasText, Highlight, GrayText).
• Testado com axe em todos os estados, inclusive opção desabilitada, conteúdo no slot e erro sem texto. O axe roda sem layout, então o contraste das cores é conferido na documentação renderizada.