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

Carregando exemplo

Código fonte editável

Formatar código

Copiar código

Resetar exemplo

Abrir no StackBlitz

Alternar fundo do preview

Múltiplo

Carregando exemplo

Código fonte editável

Formatar código

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

keepOpenOnSelect

Atributo	keep-open-on-select
Descrição	Controla se o dropdown permanece aberto após selecionar opções. Quando true, permite seleção sequencial sem reabrir a lista.
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	---

name

Atributo	name
Descrição	Nome do campo para identificação no formulário. Necessário para participação correta no envio de formulários e integração com frameworks.
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	''

required

Atributo	required
Descrição	Se verdadeiro, a seleção de uma opção é obrigatória antes que o formulário possa ser enviado.
Tipo	boolean
Valor padrão	false

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

checkValidity

Assinatura	checkValidity() => Promise<boolean>
Descrição	Retorna true se o valor do select for válido, caso contrário false. Se o select for inválido, dispara um evento 'invalid'.
Parâmetros	---

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	---

reportValidity

Assinatura	reportValidity() => Promise<boolean>
Descrição	Retorna true se o valor do componente for válido, caso contrário false. Se for inválido, exibe a mensagem de erro padrão do navegador.
Parâmetros	---

setCustomValidity

Assinatura	setCustomValidity(message: string) => Promise<void>
Descrição	Define uma mensagem de validação customizada para o select. Se a mensagem for uma string vazia, o erro customizado é limpo.
Parâmetros	message:

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	---

Dependências

Subcomponentes

• br-select-option

Usado por

• br-pagination

Depende de

• br-input
• br-icon
• br-checkbox
• br-radio
• br-list

Gráfico

Migração: Vue 1.x → Stencil 2.x

Propriedades

🟦 Propriedades renomeadas

Propriedade Vue	Propriedade Stencil	Descrição	Tipo	Padrão
--	id	Especifica o ID do componente. Se não for fornecido, o ID será gerado automaticamente e de forma aleatória	string	undefined
--	isOpen	Indica se a listagem de itens do select está expandida.	boolean	false
label	label	Rótulo que indica o tipo de informação que deve ser selecionada.	string	undefined
multiple	isMultiple	Habilita o modo múltiplo para selecionar várias opções.	boolean	false
options	options	JSON contendo as opções disponíveis no select.	object	[{ "label": <string>, "value": <string>, "selected": <boolean> }]
placeholder	placeholder	Texto auxiliar exibido antes de uma seleção.	string	Selecione uma opção
selectAllLabel	selectAllLabel	Rótulo para selecionar todas as opções.	string	"Selecionar todos"
showSearchIcon	showSearchIcon	Exibe o ícone de busca no campo de entrada.	boolean	false
unselectAllLabel	unselectAllLabel	Rótulo para desmarcar todas as opções.	string	"Desselecionar todos"