InputGroup
Campo com ícones, textos ou botões dentro da mesma borda (ex.: prefixo https://, ícone de busca, botão de copiar). InputGroup, InputGroupAddon (start ou end), InputGroupInput, InputGroupTextarea, InputGroupText e InputGroupButton.
Exemplos
Interaja com o componente e copie o código de cada exemplo.
Prefixo e ícone
Busca com atalho
Com botão
Com ButtonGroup
Textarea
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
InputGroupText,
InputGroupTextarea,
} from "@t2-educacao/midas";Uso
<InputGroup>
<InputGroupAddon>
<InputGroupText>https://</InputGroupText>
</InputGroupAddon>
<InputGroupInput placeholder="t2.com.br" aria-label="Site" />
<InputGroupAddon align="end">
<Info />
</InputGroupAddon>
</InputGroup>Componentes
| Componente | O que é |
|---|---|
InputGroup | A borda de 32px que envolve tudo. Mostra foco e erro do campo interno |
InputGroupAddon | Área antes (align="start") ou depois (align="end") do campo. Clicar nela foca o campo |
InputGroupInput | O campo de texto, sem borda própria |
InputGroupTextarea | Campo de várias linhas, cresce com o conteúdo |
InputGroupText | Texto fixo dentro do addon (ex.: "R$", "https://") |
InputGroupButton | Botão pequeno (24px, ghost) para usar dentro do addon |
Props
InputGroupAddon
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
align | "start" | "end" | "start" | Lado do addon |
InputGroupButton
Mesmas props do Button. Padrões: variant="ghost" e size="xs".
Exemplos
Busca com ícone
<InputGroup>
<InputGroupAddon>
<MagnifyingGlass />
</InputGroupAddon>
<InputGroupInput placeholder="Buscar cursos" aria-label="Buscar cursos" />
</InputGroup>Com botão
<InputGroup>
<InputGroupInput value="https://t2.com.br/convite/ana" readOnly aria-label="Link de convite" />
<InputGroupAddon align="end">
<InputGroupButton size="icon-xs" aria-label="Copiar link">
<Copy />
</InputGroupButton>
</InputGroupAddon>
</InputGroup>Com atalho
<InputGroup>
<InputGroupInput placeholder="Buscar" aria-label="Buscar" />
<InputGroupAddon align="end">
<Kbd>⌘K</Kbd>
</InputGroupAddon>
</InputGroup>Textarea
<InputGroup>
<InputGroupTextarea placeholder="Escreva sua dúvida" aria-label="Dúvida" />
</InputGroup>Inválido
Coloque aria-invalid no InputGroupInput: a borda do grupo inteiro fica vermelha.
<InputGroup>
<InputGroupInput aria-invalid aria-label="Cupom" />
</InputGroup>Acessibilidade
- O campo interno precisa de nome (
aria-labelouFieldLabel htmlFor). - Botão só com ícone dentro do addon precisa de
aria-label.
Não faça
- Usar
Inputdentro deInputGroup: useInputGroupInput, que não tem borda própria. - Colocar mais de um campo no mesmo grupo.
Input
Campo de texto de 32px. Aceita todos os tipos de <input> (text, email, password, file...), estados disabled e inválido (aria-invalid). Use dentro de Field para label, descrição e erro.
Kbd
Exibe teclas e atalhos de teclado (ex.: Ctrl + K). Kbd para uma tecla, KbdGroup para um atalho com várias teclas.