Select Input

Componente estável e recomendada para novos projetos.

Anatomia, uso, comportamento visual e recomendações conceituais são mantidos pelo Padrão Digital de Governo. Esta página documenta a implementação Web Components e sua API executável.

Peça de Lego Interna

O br-select-input é um subcomponente interno do ecossistema Select. Ele exibe o valor selecionado, recebe o termo de busca e contém a ação de abrir ou fechar a lista. Ele não fornece nem renderiza a coleção de opções.

Na quase totalidade das aplicações, utilize diretamente o componente principal <br-select>, que já orquestra este campo, a lista, o foco, o ARIA, os eventos e o formulário. Para fornecer opções, use br-select-option no slot ou setOptions() no componente pai.

Consulte O Conceito Lego no Select para entender os papéis e quando montar componentes separadamente.

Visão Geral

Subcomponente especializado de br-select responsável pelo campo de acionamento, entrada de texto e controle de expansão do popup.

Papel na composição

• Exibe o rótulo (label), texto de espaço reservado (placeholder) e o resumo dos itens atualmente selecionados.
• Atua como campo de entrada textual para digitação de filtros e termos de busca local ou remota.
• Contém o botão de ação para abrir ou recolher a lista de opções (br-select-list), controlando a rotação do ícone indicador.

Regra de uso e relacionamento

Na quase totalidade das aplicações, este componente é instanciado e gerenciado internamente pelo orquestrador br-select. Ele não fornece nem renderiza a coleção de opções: recebe do pai o valor exibido, o termo de busca e os estados de abertura e desabilitação. Não deve ser declarado manualmente na página, pois depende da coordenação do pai para foco, ARIA, eventos e sincronização com formulários. Use isoladamente apenas em composições arquiteturais altamente customizadas onde a aplicação assumir explicitamente toda a orquestração de foco e estado.

Para a documentação completa de design, consulte o Design System do GovBR.

Exemplos

Propriedades

autocomplete

Atributo	autocomplete
Descrição	Controla o preenchimento automático do input interno. Aceita on ou off; valores inválidos são ignorados.
Tipo	"off" | "on"
Valor padrão	---

borderless

Atributo	borderless
Descrição	Remove a borda do campo quando ele não está em foco.
Tipo	boolean
Valor padrão	false

density

Atributo	density
Descrição	Define a densidade visual do campo e do input interno. Aceita small, medium ou large. Valores inválidos usam medium.
Tipo	"large" | "medium" | "small"
Valor padrão	'medium'

disabled

Atributo	disabled
Descrição	Desativa toda a interação do campo de entrada.
Tipo	boolean
Valor padrão	false

filterable

Atributo	filterable
Descrição	Habilita a edição do campo usada para filtrar as opções.
Tipo	boolean
Valor padrão	false

inputWidth

Atributo	input-width
Descrição	Controla a largura visual do campo.
Exemplo de uso	'20rem'
Tipo	string
Valor padrão	---

isInline

Atributo	is-inline
Descrição	Exibe label e campo na mesma linha.
Tipo	boolean
Valor padrão	false

label

Atributo	label
Descrição	Texto exibido como rótulo do campo.
Tipo	string
Valor padrão	---

name

Atributo	name
Descrição	Nome do campo para integração com formulários.
Tipo	string
Valor padrão	---

placeholder

Atributo	placeholder
Descrição	Texto exibido quando o campo não possui valor.
Tipo	string
Valor padrão	---

required

Atributo	required
Descrição	Indica que o valor do campo é obrigatório.
Tipo	boolean
Valor padrão	false

showSearchIcon

Atributo	show-search-icon
Descrição	Exibe o ícone de busca dentro do campo.
Tipo	boolean
Valor padrão	---

value

Atributo	value
Descrição	Valor textual apresentado no input.
Tipo	string
Valor padrão	---

Eventos

Evento	Descrição	Depreciação	Propagação
brSelectInputActionClick	Evento emitido quando o usuário aciona o ícone de abertura/fechamento.	---	true
brSelectInputClick	Evento emitido quando o usuário clica no campo do select.	---	true
brSelectInputFocus	Evento emitido quando o campo interno recebe foco.	---	true
brSelectInputValueChange	Evento emitido quando o valor digitado no campo de busca muda.	---	true

Métodos

flipDown

Descrição	Atualiza o ícone para o estado visual de lista fechada.
Assinatura	flipDown() => Promise<void>
Parâmetros	---

flipUp

Descrição	Atualiza o ícone para o estado visual de lista aberta.
Assinatura	flipUp() => Promise<void>
Parâmetros	---

setFocus

Descrição	Reaplica o foco no input nativo encapsulado por br-input.
Assinatura	setFocus() => Promise<void>
Parâmetros	---

CSS Shadow Parts

Nome	Descrição
"action-button"	Botão interno da ação.
"action"	Botão de ação.
"container"	Contêiner visual do campo.
"group"	Grupo visual do campo.
"icon"	Ícone do campo.
"input"	Campo input nativo.
"label"	Rótulo do campo.

Dependências

Componente pai

• br-select

Usado por

• br-select

Depende de

• br-icon
• br-input

Gráfico

Migração para <br-select-input>

Na 1.x, o campo visual fazia parte de br-select e não era uma API pública separada. Na 2.x, br-select-input continua sendo um subcomponente de composição.

Aplicações devem configurar label, placeholder, busca, abertura, valor e a fonte de opções no br-select:

<br-select label="Órgão" placeholder="Selecione" filterable></br-select>

Use br-select-input diretamente apenas ao implementar uma composição própria. Nesse caso, a aplicação precisa coordenar value, disabled, filterable e os eventos brSelectInputFocus, brSelectInputValueChange, brSelectInputActionClick e brSelectInputClick.

Esse subcomponente não fornece opções e não substitui sozinho a lista nem o contrato completo de seleção e formulário de br-select. Para opções fixas, use br-select-option no slot; para opções dinâmicas, use setOptions() no br-select.