Radio
Visão Geral
Design System
Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Básico
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Estado
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
checked
| Atributo | checked |
| Descrição | Define o estado de seleção do radio. Se definido como verdadeiro, o radio estará marcado. Caso contrário, estará desmarcado. |
| Tipo | boolean |
| Valor padrão | false |
customId
| Atributo | custom-id |
| Descrição | Identificador único; gerado automaticamente quando omitido. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
disabled
| Atributo | disabled |
| Descrição | Desativa o radio, tornando-o não interativo. |
| Tipo | boolean |
| Valor padrão | false |
hasHiddenLabel
| Atributo | has-hidden-label |
| Descrição | Define se o label associado ao radio deve ser oculto. Se definido como verdadeiro, o texto do label será oculto, mas o radio ainda estará visível e funcional. |
| Tipo | boolean |
| Valor padrão | false |
label
| Atributo | label |
| Descrição | Texto descritivo exibido à direita do radio. Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado. |
| Tipo | string |
| Valor padrão | --- |
name
| Atributo | name |
| Descrição | Define o nome do radio, que é utilizado para agrupar radios em formulários e identificar o campo. O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários. (obrigatório) |
| Tipo | string |
| Valor padrão | --- |
required
| Atributo | required |
| Descrição | Se verdadeiro, o radio é obrigatório e uma opção deve ser selecionada antes que o formulário possa ser enviado. |
| Tipo | boolean |
| Valor padrão | false |
state
| Atributo | state |
| Descrição | Indica a validade do radio. Se não for especificado, o valor padrão é null, indicando que a validade não foi definida. |
| Tipo | "invalid" | "valid" |
| Valor padrão | --- |
value
| Atributo | value |
| Descrição | Define o valor associado ao radio quando ele faz parte de um formulário nativo (<form>).Esse valor é enviado com o formulário quando o radio está selecionado. Nota: Esta propriedade não deve ser utilizada para determinar se o radio está selecionado; para verificar o estado de seleção, use a propriedade checked. |
| Tipo | string |
| Valor padrão | --- |
Slots
| Nome | Descrição |
|---|---|
"default" | Slot para o rótulo do rádio, como alternativa à propriedade label. |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
checkedChange | Disparado depois que o valor do checked foi alterado | true |
Métodos
checkValidity
| Assinatura | checkValidity() => Promise<boolean> |
| Descrição | Retorna true se o valor do radio for válido, caso contrário false.Se o radio for inválido, dispara um evento 'invalid'. |
| Parâmetros | --- |
reportValidity
| Assinatura | reportValidity() => Promise<boolean> |
| Descrição | Retorna true se o valor do radio for válido, caso contrário false.Se for inválido, exibe a mensagem de erro padrão do navegador. |
| Parâmetros | --- |
setCustomValidity
| Assinatura | setCustomValidity(message: string) => Promise<void> |
| Descrição | Define uma mensagem de validação customizada para o radio. Se a mensagem for uma string vazia, o erro customizado é limpo. |
| Parâmetros | message: |
setFocus
| Assinatura | setFocus() => Promise<void> |
| Descrição | |
| Parâmetros | --- |
toggleChecked
| Assinatura | toggleChecked() => Promise<void> |
| Descrição | Inverte o valor da prop checked |
| Parâmetros | --- |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"radio-input" | |
"radio-label" |