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
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Ícone
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Estado
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('br-switch') |
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 | --- |
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
toggleChecked
| Assinatura | toggleChecked() => Promise<void> |
| Descrição | Inverte o valor da prop checked |
| Parâmetros | --- |