AppInput

Átomos

Campo de texto de uma linha com rótulo, texto de apoio, mensagem de erro, ícones e slots laterais.

Quando usar: formulários (nome, CPF, e-mail, número da nota fiscal, busca) que precisam de rótulo e feedback de validação.

Quando não usar: texto de várias linhas (use AppTextarea) ou escolha entre opções fixas (use um <select> nativo).

O ref e o className são repassados ao <input>; as demais props HTML também.

Importar

import { AppInput } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppInput.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppInput.css';

Exemplos

Default

const Default = () => <AppInput label="CPF" placeholder="000.000.000-00" />;

With Hint

const WithHint = () => <AppInput
    label="Número da nota fiscal"
    placeholder=""
    hint="Está no topo do cupom fiscal." />;

With Error

const WithError = () => <AppInput
    label="CPF"
    placeholder="000.000.000-00"
    error="CPF inválido. Confira os números."
    defaultValue="123" />;

Disabled

const Disabled = () => <AppInput
    label="CPF"
    placeholder="000.000.000-00"
    disabled
    defaultValue="123.456.789-00" />;

Sizes

const Sizes = () => <div style={{ display: 'grid', gap: 16 }}>
    <AppInput placeholder="000.000.000-00" label="Pequeno" size="sm" />
    <AppInput
        placeholder="000.000.000-00"
        label="Médio (padrão)"
        size="md" />
</div>;

Leading Icon

const LeadingIcon = () => <AppInput
    label="E-mail"
    placeholder="nome@email.com"
    type="email"
    leadingIcon={<IconMail />}
    trailingIcon={<IconHelpOutline />} />;

Payment

const Payment = () => <AppInput
    label="Número do cartão"
    placeholder="0000 0000 0000 0000"
    inputMode="numeric"
    startContent={<AppPaymentIcon method="visa" />} />;

Leading Text Addon

const LeadingTextAddon = () => <AppInput
    label="Site"
    placeholder="www.exemplo.com.br"
    leadingAddon="http://" />;

Trailing Select Addon

const TrailingSelectAddon = () => <AppInput
    label="Valor"
    placeholder="0,00"
    inputMode="decimal"
    trailingAddon={(<select aria-label="Moeda" defaultValue="BRL">
      <option value="BRL">R$</option>
      <option value="USD">US$</option>
    </select>)} />;

Trailing Button Addon

const TrailingButtonAddon = () => <AppInput
    label="Link de indicação"
    placeholder="000.000.000-00"
    defaultValue="https://exemplo.com.br/promo/abc"
    readOnly
    trailingAddon={<AppButton appearance="ghost" size="sm">Copiar</AppButton>} />;

Props

Prop	Tipo	Padrão	Descrição
`label`*	`string`	`—`	Rótulo visível do campo (obrigatório): vira o nome acessível via `<label htmlFor>`.
`endAction`	`ReactNode`	`—`	Ação interativa no fim do campo, antes do segmento direito (ex.: alternar a visibilidade da senha). Ao contrário de `trailingIcon`, que é decorativo, o elemento deve ser focável e descrever a própria ação (ex.: `aria-label`).
`error`	`string`	`—`	Mensagem de erro: troca o hint, pinta o campo de vermelho e marca `aria-invalid`.
`hint`	`string`	`—`	Texto de apoio abaixo do campo. Some enquanto houver `error`.
`leadingAddon`	`ReactNode`	`—`	Segmento à esquerda: texto fixo ("http://", com divisor) ou `<select>` ("R$", sem divisor, com seta).
`leadingIcon`	`ReactNode`	`—`	Ícone de 20px antes do texto. Decorativo (`aria-hidden`).
`size`	`"sm" \| "md"`	`—`	Altura do campo: `sm` ou `md`. Padrão: `md`.
`startContent`	`ReactNode`	`—`	Conteúdo livre antes do texto, na própria caixa: selos de pagamento, tags etc.
`trailingAddon`	`ReactNode`	`—`	Segmento à direita: `AppButton` (com divisor) ou `<select>` de moeda (sem divisor, com seta).
`trailingIcon`	`ReactNode`	`—`	Ícone de 16px no fim do campo (ex.: ajuda). Com `error`, o ícone de erro toma o lugar. Decorativo.