Campos de entrada

Addon Input Group

Um campo de texto envolto em um shell com borda que pode conter um ícone inicial, um botão final ou texto e compartilha um anel de foco em todo o grupo.

https://9/64

Como usar Addon Input Group

Um campo de texto envolto em um shell com borda que pode conter um ícone inicial, um botão final ou texto e compartilha um anel de foco em todo o grupo.

Use este grupo quando um campo de texto e sua ação formarem uma unidade, como na busca de um catálogo.

Coloque o ícone de busca antes do campo e conecte o botão final à sua função de busca. O contorno de foco compartilhado mantém a unidade visual durante a digitação.

O componente fornece o campo e sua apresentação. Sua aplicação deve oferecer um rótulo acessível, executar a busca e validar o valor enviado.

Propriedades: placeholder, trailingLabel, accentColor, showLeadingIcon

Quais frameworks estão disponíveis?

O catálogo inclui estas versões: react, vue, svelte, astro, html. A prévia desta página usa React.

Como acessar a implementação?

O código, as versões e os comandos de instalação estão disponíveis no painel acima.

Conecte seu agente

Componentes relacionados

2792Auto Grow TextareaCampos de entradaUm campo de texto de várias linhas que fica mais alto à medida que a pessoa digita mais, em vez de rolar dentro de uma caixa fixa.

2321Clean Text FieldCampos de entradaUma entrada de texto simples e com bordas para um formulário rotulado: neutro em repouso, um anel de destaque nítido em foco, silenciado quando desativado.

2801Compact select menuCampos de entradaUm botão de disparo que abre uma lista flutuante de opções, com a escolha atual mostrada no botão e uma marca ao lado dela na lista.

2343Drawn check checkboxCampos de entradaUma caixa de seleção cuja marca de seleção se desenha traço por traço à medida que a caixa é preenchida com uma cor sólida de destaque.

2346Editable date fieldCampos de entradaUm campo de texto para uma data que aceita digitação livre e também pode ser preenchido em um pequeno popover de calendário aberto por um botão de ícone à direita.

1529Floating label inputCampos de entradaUm campo de texto cujo rótulo fica dentro da caixa e sobe até a borda superior quando o campo está em foco ou quando o campo tem um valor, com aparência em foco, válida e inválida.