InputGroup
Encostos
import { InputGroup } from '@rivocode/ui'Quando usar
Moldura que encosta texto ou botão no campo: R$ antes, .com.br depois, lupa
de busca, botão de copiar.
A borda e o anel de foco passam para a moldura, e o campo de dentro entrega os dois. Sem isso aparecem duas bordas encaixadas e dois aneis, e o conjunto deixa de parecer um campo só.
Acompanham InputPrefix, InputSuffix e InputAction.
No React Native
Traduz, e a forma muda junto: no web a moldura é composição (InputGroup por fora, Input, InputPrefix e InputAction por dentro) e ela desarma a borda do campo com um seletor de descendente. Esse seletor não existe no React Native, e quem escrevesse a mesma árvore lá ganharia duas bordas encaixadas sem jeito de apagar a de dentro. Por isso a moldura nativa desenha o campo: value, onValueChange, prefix, suffix e actions são props dela. Não há size: altura de controle é única no nativo, porque alvo de toque não encolhe.
API
| Prop | Tipo |
|---|---|
size0.5.0A altura da moldura, que precisa acompanhar a do campo de dentro. | "lg""md""sm" |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.
Partes
InputGroup se monta com estas peças. Todas vivem nesta página, porque separar cada uma num endereço obrigaria a abrir seis abas para montar uma tela.
InputAction
/input-action.mdBotão colado no campo, sem borda própria e ocupando a altura toda. Serve para buscar, copiar, mostrar a senha.
Sem prop própria: repassa ao elemento de baixo o que você mandar.
InputPrefix
/input-prefix.mdO encosto antes do campo, dentro do InputGroup. Texto curto, sigla ou ícone.
Sem prop própria: repassa ao elemento de baixo o que você mandar.
InputSuffix
/input-suffix.mdO encosto depois do campo, dentro do InputGroup.
Sem prop própria: repassa ao elemento de baixo o que você mandar.