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.

Anatomia

1. Pergunta: a legenda do grupo, vinda de label no BaseRadioGroup, com o asterisco de required ou o "(opcional)" de optional.
2. Opções: um BaseRadio para cada resposta, com o círculo e o texto de label (ou o slot).
3. Mensagem: abaixo das opções, com a ajuda (helper-text), o erro (invalid-text) ou o aviso (warn-text).

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ê.

Legenda escondida

Com hide-label, a legenda sai da tela e continua para o leitor de tela. Use só quando um título visível logo acima já faz a pergunta, como o de um cartão; o label continua obrigatório e deve dizer o mesmo que esse título.

Lei que rege o contrato CF018/2026

Lei que rege o contrato CF018/2026

Lei 14.133/2021Lei 8.666/1993

Faça e não faça

Faça	Não faça
Pergunte "Lei de licitação" e responda "Lei 14.133/2021"	Repetir a pergunta em cada opção
Use para escolher uma entre duas e sete opções	Usar para 27 comarcas; use uma lista de seleção
Deixe marcada a opção padrão segura, quando houver	Marcar uma opção ao acaso só para o grupo não ficar vazio

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="law" label="Lei de licitação" :invalid="showError" 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>

Propriedades

BaseRadioGroup

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

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

BaseRadio

Propriedade	Tipo	Padrão	Descrição
value	string	obrigatória	Valor gravado no v-model do grupo
label	string	—	Texto da opção; o slot padrão substitui para conteúdo mais rico
disabled	boolean	false	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:

Tecla	O que faz
Tab	Entra no grupo pela opção marcada; sem opção marcada, pela primeira habilitada. Um segundo Tab sai do grupo
Shift + Tab	Entra pela opção marcada ou, sem ela, pela última habilitada, e sai do grupo
↓ / →	Move o foco para a opção seguinte e a marca
↑ / ←	Move o foco para a opção anterior e a marca
Espaço	Marca a opção em foco

• Somente leitura, as setas e o Espaço não mudam a escolha.
• 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.