Select
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
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Múltiplo
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
borderless
| Atributo | borderless |
| Descrição | Propaga para o input interno a remoção da borda quando desfocado. |
| Tipo | boolean |
| Valor padrão | false |
customId
| Atributo | custom-id |
| Descrição | Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. |
| Tipo | string |
| Valor padrão | br-select-${selectId++} |
disabled
| Atributo | disabled |
| Descrição | Desabilita a interação com o componente br-select.Quando true, o input e as opções ficam desabilitados e não respondem a cliques ou teclas. |
| Tipo | boolean |
| Valor padrão | false |
inputWidth
| Atributo | input-width |
| Descrição | Largura do campo de entrada interno (por exemplo, '88px'). Quando definido, sobrescreve a largura padrão de 100% do input. |
| Tipo | string |
| Valor padrão | --- |
isInline
| Atributo | is-inline |
| Descrição | Exibe o rótulo e o controle em linha (ao lado), ao invés de empilhados. Útil para casos contextuais como paginação. |
| Tipo | boolean |
| Valor padrão | false |
isMultiple
| Atributo | is-multiple |
| Descrição | Habilita o modo múltiplo para selecionar várias opções. |
| Tipo | boolean |
| Valor padrão | false |
isOpen
| Atributo | is-open |
| Descrição | Indica se a listagem de itens do select está expandida |
| Tipo | boolean |
| Valor padrão | false |
label
| Atributo | label |
| Descrição | Rótulo que indica o tipo de informação que deve ser selecionada. |
| Tipo | string |
| Valor padrão | --- |
options
| Atributo | options |
| Descrição | Define as opções disponíveis no componente de seleção. Se uma string for fornecida, ela será convertida internamente para um array via JSON.parse. Caso o formato seja inválido, um erro será registrado e as opções serão definidas como um array vazio.Exemplo de uso: typescript<br />options='[{"label": "Sim", "value": "1"}, {"label": "Não", "value": "0"}]'<br />// ou<br />options=[{ label: "Sim", value: "1" }, { label: "Não", value: "0" }]<br /> |
| Tipo | string | { label: string; value: string; selected?: boolean; }[] |
| Valor padrão | [] |
placeholder
| Atributo | placeholder |
| Descrição | Texto auxiliar exibido antes de uma seleção. |
| Tipo | string |
| Valor padrão | '' |
selectAllLabel
| Atributo | select-all-label |
| Descrição | Rótulo para selecionar todas as opções. |
| Tipo | string |
| Valor padrão | 'Selecionar todos' |
showSearchIcon
| Atributo | show-search-icon |
| Descrição | Exibe o ícone de busca no campo de entrada. |
| Tipo | boolean |
| Valor padrão | false |
unselectAllLabel
| Atributo | unselect-all-label |
| Descrição | Rótulo para desmarcar todas as opções. |
| Tipo | string |
| Valor padrão | 'Desselecionar todos' |
value
| Atributo | value |
| Descrição | Valor selecionado (string para single, string[] para multiple) |
| Tipo | string | string[] |
| Valor padrão | --- |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
closed | Dispara quando o dropdown é fechado. | true |
opened | Dispara quando o dropdown é aberto. | true |
optionHover | Emite os dados da opção quando ela recebe foco/hover (antes da seleção). | true |
valueChange | Evento emitido sempre que houver atualização nos itens selecionados. RENOMEADO PARA valueChange para compatibilidade com ngModel. | true |
Métodos
clear
| Assinatura | clear() => Promise<void> |
| Descrição | Limpa todas as opções selecionadas. |
| Parâmetros | --- |
getValue
| Assinatura | getValue() => Promise<string | string[]> |
| Descrição | Retorna o valor selecionado. |
| Parâmetros | --- |
setValue
| Assinatura | setValue(newValue: string | string[]) => Promise<void> |
| Descrição | Define o valor do componente. |
| Parâmetros | newValue: O novo valor a ser definido. |
toggleOpen
| Assinatura | toggleOpen() => Promise<void> |
| Descrição | Inverte o valor da prop isOpen |
| Parâmetros | --- |