Input
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
Densidade
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Destaque
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Inline
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Estado
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Com Máscara
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
actionLabel
| Atributo | action-label |
| Descrição | Texto exibido no botão de ação à direita do input. |
| Tipo | string |
| Valor padrão | --- |
actionTabIndex
| Atributo | action-tab-index |
| Descrição | Define o tabindex do botão de ação. Útil para remover o botão da sequência de tabulação quando o foco é gerenciado externamente (ex.: br-select). |
| Tipo | number |
| Valor padrão | --- |
autocomplete
| Atributo | autocomplete |
| Descrição | Controla o comportamento de preenchimento automático do navegador para o input. |
| Tipo | "off" | "on" |
| Valor padrão | --- |
autocorrect
| Atributo | autocorrect |
| Descrição | Controla a correção automática do texto. |
| Tipo | "off" | "on" |
| Valor padrão | 'off' |
borderless
| Atributo | borderless |
| Descrição | Remove a borda do input quando não está em foco. Útil para composições contextuais (ex.: paginação). |
| Tipo | boolean |
| Valor padrão | false |
controlWidth
| Atributo | control-width |
| Descrição | Largura do campo de entrada (por exemplo, '88px'). Quando definido, sobrescreve a largura padrão de 100%. |
| Tipo | string |
| Valor padrão | --- |
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-input-${inputId++} |
density
| Atributo | density |
| Descrição | Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido. |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
disabled
| Atributo | disabled |
| Descrição | Desativa o input, tornando-o não interativo. |
| Tipo | boolean |
| Valor padrão | false |
helpText
| Atributo | help-text |
| Descrição | Texto adicional que fornece ajuda ou informações sobre o input. |
| Tipo | string |
| Valor padrão | --- |
isHighlight
| Atributo | is-highlight |
| Descrição | Se verdadeiro, o input terá destaque visual. |
| Tipo | boolean |
| Valor padrão | false |
isInline
| Atributo | is-inline |
| Descrição | Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline). |
| Tipo | boolean |
| Valor padrão | false |
label
| Atributo | label |
| Descrição | Texto exibido como rótulo do input. |
| Tipo | string |
| Valor padrão | --- |
mask
| Atributo | mask |
| Descrição | Máscara aplicada ao valor digitado (use # para marcar posições numéricas). |
| Tipo | string |
| Valor padrão | --- |
max
| Atributo | max |
| Descrição | Define o valor máximo para campos de entrada numéricos. |
| Tipo | number |
| Valor padrão | --- |
maxlength
| Atributo | maxlength |
| Descrição | Define o comprimento máximo do valor do campo de entrada. |
| Tipo | number |
| Valor padrão | --- |
min
| Atributo | min |
| Descrição | Define o valor mínimo para campos de entrada numéricos. |
| Tipo | number |
| Valor padrão | --- |
minlength
| Atributo | minlength |
| Descrição | Define o comprimento mínimo do valor do campo de entrada. |
| Tipo | number |
| Valor padrão | --- |
multiple
| Atributo | multiple |
| Descrição | Se verdadeiro, permite a seleção de múltiplos arquivos. |
| Tipo | boolean |
| Valor padrão | false |
name
| Atributo | name |
| Descrição | Nome do input, utilizado para identificação em formulários. |
| Tipo | string |
| Valor padrão | --- |
pattern
| Atributo | pattern |
| Descrição | Define o padrão de entrada para validação. |
| Tipo | string |
| Valor padrão | --- |
placeholder
| Atributo | placeholder |
| Descrição | Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário. |
| Tipo | string |
| Valor padrão | --- |
readonly
| Atributo | readonly |
| Descrição | Se verdadeiro, o valor do input é exibido, mas não pode ser editado pelo usuário. |
| Tipo | boolean |
| Valor padrão | false |
required
| Atributo | required |
| Descrição | Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado. |
| Tipo | boolean |
| Valor padrão | false |
state
| Atributo | state |
| Descrição | Define o estado do input |
| Tipo | "danger" | "info" | "success" | "warning" |
| Valor padrão | --- |
step
| Atributo | step |
| Descrição | Define o valor do passo para campos de entrada numéricos. |
| Tipo | number |
| Valor padrão | --- |
type
| Atributo | type |
| Descrição | Especifica o tipo de entrada do campo. |
| Tipo | "color" | "email" | "file" | "hidden" | "number" | "password" | "range" | "search" | "tel" | "text" | "url" |
| Valor padrão | 'text' |
value
| Atributo | value |
| Descrição | Valor exibido no input. Pode ser alterado pelo usuário se a propriedade readonly não estiver ativa. |
| Tipo | string |
| Valor padrão | --- |
Slots
| Nome | Descrição |
|---|---|
"action" | Botão à direita do input. |
"feedback" | Mensagem de feedback como resposta específica a uma interação do usuário com o input. Pode ser feedback de erro, aviso, sucesso ou informação. |
"help-text" | Personalização do texto de ajuda. |
"icon" | Ícone à esquerda do input. |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
valueChange | Valor atualizado do input | true |
Métodos
checkValidity
| Assinatura | checkValidity() => Promise<boolean> |
| Descrição | Retorna true se o valor do input for válido, caso contrário false.Se o input for inválido, dispara um evento 'invalid'. |
| Parâmetros | --- |
reportValidity
| Assinatura | reportValidity() => Promise<boolean> |
| Descrição | Retorna true se o valor do input for válido, caso contrário false.Se o input for inválido, exibe uma 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 input. Se a mensagem for uma string vazia, o erro customizado é limpo. |
| Parâmetros | message: - Mensagem de erro customizada ou string vazia para limpar |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"label" |
Dependências
Usado por
Depende de
Gráfico
Migração: Vue 1.x → Stencil 2.x
Propriedades
🟦 Propriedades renomeadas
| Propriedade Vue | Propriedade Stencil | Descrição | Tipo | Padrão |
|---|---|---|---|---|
autocomplete | autocomplete | Define o comportamento do autocomplete. | "off" | "on" | --- |
danger | state | Estado de perigo. | "danger" | "info" | "success" | "warning" | --- |
density | density | Define a densidade. | "large" | "medium" | "small" | 'medium' |
disabled | disabled | Define se é desabilitado. | boolean | false |
highlight | is-highlight | Define se está destacado. | boolean | false |
info | state | Estado de informação. | "danger" | "info" | "success" | "warning" | --- |
inline | is-inline | Define o layout como inline. | boolean | false |
label | label | Define o rótulo. | string | --- |
name | name | Define o nome. | string | --- |
placeholder | placeholder | Define o placeholder. | string | --- |
readonly | readonly | Define se é somente leitura. | boolean | false |
required | required | Define se é obrigatório. | boolean | false |
success | state | Estado de sucesso. | "danger" | "info" | "success" | "warning" | --- |
type | type | Define o tipo de campo. | "color" | "email" | "file" | "hidden" | "number" | "password" | "range" | "search" | "tel" | "text" | "url" | 'text' |
value | value | Define o valor inicial. | string | --- |
warning | state | Estado de alerta. | "danger" | "info" | "success" | "warning" | --- |
Eventos
🟦 Eventos renomeados
| Evento Vue | Evento Stencil | Descrição |
|---|---|---|
input | input | Evento emitido quando o valor é modificado. |