Tag
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Contador
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Densidade
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Ícones
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Interação
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Status
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
ariaDescribedby
| Atributo | aria-describedby |
| Descrição | ID do elemento que fornece descrição adicional da tag. Referencia um elemento na página que contém informações complementares sobre a tag. A descrição é lida após o conteúdo principal, fornecendo contexto extra aos usuários de leitores de tela. Exemplo: aria-describedby="help-status" onde existe Aguardando aprovação |
| Tipo | string |
| Valor padrão | null |
ariaLabel
| Atributo | aria-label |
| Descrição | Define o rótulo acessível usado por tecnologias assistivas. > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam ariaLabel. |
| Tipo | string |
| Valor padrão | --- |
bgColor
| Atributo | bg-color |
| Descrição | A propriedade 'color' permite definir a cor do componente. Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM. |
| Tipo | string |
| Valor padrão | '' |
customId
| Atributo | custom-id |
| Descrição | Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por Helpers.generateUniqueId(). > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam customId. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
density
| Atributo | density |
| Descrição | Define a densidade visual do componente. - small: Baixa densidade (componente maior, mais espaçamento e altura).- medium: Densidade intermediária, padrão recomendado para a maioria dos casos.- large: Alta densidade (componente menor, menos espaçamento e altura).> Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam density. |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
disabled
| Atributo | disabled |
| Descrição | Desabilita a interação com o componente. > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam disabled. |
| Tipo | boolean |
| Valor padrão | false |
iconName
| Atributo | icon-name |
| Descrição | A propriedade 'iconName' define o nome do ícone que será exibido ao lado do texto. O valor padrão é 'fa-solid:car', que corresponde a um ícone de carro da biblioteca Font Awesome. |
| Tipo | string |
| Valor padrão | '' |
interaction
| Atributo | interaction |
| Descrição | Interação deve ser habilitada. |
| Tipo | boolean |
| Valor padrão | false |
interactionSelect
| Atributo | interaction-select |
| Descrição | Interação de seleção deve ser habilitada. |
| Tipo | boolean |
| Valor padrão | false |
label
| Atributo | label |
| Descrição | A propriedade 'label' é uma string que representa o texto a ser exibido no componente. Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente. |
| Tipo | string |
| Valor padrão | '' |
multiple
| Atributo | multiple |
| Descrição | A tag permite seleção múltipla. |
| Tipo | boolean |
| Valor padrão | false |
name
| Atributo | name |
| Descrição | A propriedade 'name' é uma string que representa o nome do grupo da tag para seleção. Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente. |
| Tipo | string |
| Valor padrão | '' |
selected
| Atributo | selected |
| Descrição | A tag está selecionada. |
| Tipo | boolean |
| Valor padrão | false |
shape
| Atributo | shape |
| Descrição | A propriedade 'shape' define o formato do componente. |
| Tipo | "circle" | "default" | "rounded" |
| Valor padrão | 'default' |
status
| Atributo | status |
| Descrição | Transforma a tag em um indicador de status, com aparência circular. É flexível podendo ser utilizado com label ou apenas a superfície circular (informação é transmitida por meio de cores). |
| Tipo | boolean |
| Valor padrão | false |
Slots
| Nome | Descrição |
|---|---|
"close-button" | Botão de fechar customizado. Quando utilizado, o botão padrão é substituído. |
"default" | Slot para inserir o conteúdo da tag, como rótulo ou ícone. |
"icon" | Ícone customizado da tag. Quando utilizado, a prop icon é ignorada. |
"label" | Rótulo customizado da tag. Quando utilizado, a prop label é ignorada. |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
radioSelected | Evento emitido quando a tag é selecionada. | true |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"input" | Elemento input da tag de seleção. |
"label" | Rótulo da tag de seleção. |
"tag" | Elemento principal da tag. |