# InputGroup

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.

## Importação

```tsx
import { InputGroup } from '@rivocode/ui'
```

## Exemplos

### Encostos

```tsx
import { InputAction, InputGroup, InputPrefix, InputSuffix, MaskedInput } from '@rivocode/ui'

export function Edges() {
  return (
    <div className="flex w-80 flex-col gap-3">
      <InputGroup>
        <InputPrefix>R$</InputPrefix>
        <MaskedInput aria-label="Valor" mask="moeda" defaultValue="248000" />
      </InputGroup>

      <InputGroup>
        <MaskedInput aria-label="Subdomínio" mask="" placeholder="minha-empresa" />
        <InputSuffix>.rivocode.com</InputSuffix>
      </InputGroup>

      <InputGroup>
        <MaskedInput aria-label="Buscar nota ou cliente" mask="" placeholder="Buscar nota ou cliente" />
        <InputAction aria-label="Buscar">Ir</InputAction>
      </InputGroup>
    </div>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `size` | `"lg" \| "md" \| "sm"` |  | 0.5.0 | A altura da moldura, que precisa acompanhar a do campo de dentro. |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Partes

O componente se monta com as peças abaixo. Todas vêm de `@rivocode/ui`.

### InputAction

Botão colado no campo, sem borda própria e ocupando a altura toda. Serve para buscar, copiar, mostrar a senha.

### InputPrefix

O encosto antes do campo, dentro do `InputGroup`. Texto curto, sigla ou ícone.

### InputSuffix

O encosto depois do campo, dentro do `InputGroup`.

## Ver também

- [Autocomplete](/componentes/autocomplete.md)
- [Calendar](/componentes/calendar.md)
- [Checkbox](/componentes/checkbox.md)
- [CheckboxGroup](/componentes/checkbox-group.md)
- [ColorPicker](/componentes/color-picker.md)
- [Combobox](/componentes/combobox.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)