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.

Subcomponente de Composição

O br-select-input é o subcomponente responsável pelo campo de texto, busca e acionamento da lista suspensa. Deve ser utilizado dentro do componente orquestrador <br-select>, que gerencia automaticamente a sincronização de valores, foco e acessibilidade.

Visão Geral

Campo de texto e acionamento interno do br-select.

É gerenciado automaticamente pelo br-select para exibir o valor selecionado, receber termos de busca e abrir ou fechar a lista suspensa. Não é necessário utilizá-lo de forma avulsa.

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

clearable

Atributo	clearable
Descrição	Exibe o botão de limpar enquanto houver texto no campo editável. O br-select o ativa somente durante a busca, para limpar o termo digitado sem alterar a seleção.
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 a lupa mesmo quando o campo não é filtrável. Quando filterable é true, a lupa é exibida automaticamente. Em campos com menos de 128px, a lupa é omitida para preservar valor e seta.
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	---

syncCombobox

Descrição	Sincroniza o estado acessível do campo com o select orquestrador.
Assinatura	syncCombobox(state: SelectComboboxState) => Promise<void>
Parâmetros	state:

CSS Shadow Parts

Nome	Descrição
"action-button"	Botão interno da ação.
"action"	Botão de ação.
"clear"	Botão de limpar o texto digitado.
"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.