Switch
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
Density
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Ícone
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 checkbox. Se definido como verdadeiro, o checkbox 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() |
density
| Atributo | density |
| Descrição | O ajuste da densidade consiste em aumentar ou reduzir a área de interação do switch. Quanto menor for a densidade, maior a área de interação. |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
disabled
| Atributo | disabled |
| Descrição | Desativa o switch, tornando-o não interativo. |
| Tipo | boolean |
| Valor padrão | false |
hasIcon
| Atributo | has-icon |
| Descrição | Adiciona um ícone ao switch para indicar a mudança de estado. |
| Tipo | boolean |
| Valor padrão | false |
label
| Atributo | label |
| Descrição | Texto descritivo. Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado. |
| Tipo | string |
| Valor padrão | --- |
labelOff
| Atributo | label-off |
| Descrição | Texto exibido quando o switch está desativado. |
| Tipo | string |
| Valor padrão | --- |
labelOn
| Atributo | label-on |
| Descrição | Texto exibido quando o switch está ativado. |
| Tipo | string |
| Valor padrão | --- |
labelPosition
| Atributo | label-position |
| Descrição | Posição do rótulo em relação ao switch. |
| Tipo | "left" | "right" | "top" |
| Valor padrão | 'left' |
name
| Atributo | name |
| Descrição | Define o nome do switch, que é utilizado para agrupar switches em formulários e identificar o campo. O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários. |
| Tipo | string |
| Valor padrão | --- |
required
| Atributo | required |
| Descrição | Se verdadeiro, o switch é obrigatório e deve ser ativado antes que o formulário possa ser enviado. |
| Tipo | boolean |
| Valor padrão | false |
value
| Atributo | value |
| Descrição | Define o valor associado ao switch quando ele faz parte de um formulário nativo (<form>).Esse valor é enviado com o formulário quando o switch está selecionado. Nota: Esta propriedade não deve ser utilizada para determinar se o switch 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 switch, com prioridade sobre a 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 switch for válido, caso contrário false.Se o switch for inválido, dispara um evento 'invalid'. |
| Parâmetros | --- |
reportValidity
| Assinatura | reportValidity() => Promise<boolean> |
| Descrição | Retorna true se o valor do componente 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 switch. Se a mensagem for uma string vazia, o erro customizado é limpo. |
| Parâmetros | message: |
toggleChecked
| Assinatura | toggleChecked() => Promise<void> |
| Descrição | Inverte o valor da prop checked |
| Parâmetros | --- |
Dependências
Usado por
Gráfico
Migração: Vue 1.x → Stencil 2.x
Propriedades
🟦 Propriedades renomeadas
| Propriedade Vue | Propriedade Stencil | Descrição | Tipo | Padrão |
|---|---|---|---|---|
ariaLabel | ariaLabel | (Opcional) Acessibilidade: define uma cadeia de caracteres para descrever o elemento. | string | - |
checked | checked | (Opcional) Se presente, indica que o estado inicial do switch é true. | boolean | false |
disabled | disabled | (Opcional) Se presente, indica que o switch está desabilitado. | boolean | false |
icon | hasIcon | (Opcional) Se presente, adiciona um ícone padrão à chave de alternância. | boolean | false |
id | id | (Opcional) ID do componente. Também usado para conectar o rótulo correspondente. | string | - |
label | label | (Opcional) Descreve o que o switch faz quando ativado. Sobrescreve o rótulo passado por slot, se presente. | string | - |
labelChecked | labelOn | (Opcional) Rótulo para o switch ativado, auxiliando no entendimento de sua posição. | string | null |
labelNotChecked | labelOff | (Opcional) Rótulo para o switch desativado, auxiliando no entendimento de sua posição. | string | null |
name | name | (Opcional) Define o valor do atributo name do checkbox subjacente. | string | - |
right | labelPosition | (Opcional) Se presente, posiciona o rótulo a direita do switch. | right | left | top | left |
size | density | (Opcional) Ajusta a densidade da área interativa do switch. | large | medium | small | medium |
top | labelPosition | (Opcional) Se presente, posiciona o rótulo acima do switch. | right | left | top | left |
value | value | Valor associado ao checkbox quando o switch está ativado. | string | - |