FormField

Moléculas

Estrutura de campo com rótulo, controle fornecido pelo consumidor e feedback acessível.

Quando usar: controles próprios (data nativa, máscara ou componente de terceiros) que precisam seguir o padrão de rótulo, dica e erro da biblioteca. Para a mesma caixa do AppInput, envolva o controle em <div className="app-input-group app-input-group--md"> e use a classe app-input nele.

Quando não usar: AppInput, AppTextarea e AppSelect, que já incluem essa estrutura; controles de escolha com rótulo ao lado.

Importar

import { FormField } 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/FormField.css';

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

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

Exemplos

Default

const Default = () => <FormField label="Data da compra" hint="A mesma do cupom fiscal.">{(field) => (
      <div className="app-input-group app-input-group--md">
        <input type="date" className="app-input" {...field} />
      </div>
    )}</FormField>;

Props

Prop	Tipo	Padrão	Descrição
`children`*	`(props: FormFieldControlProps) => ReactNode`	`—`	Função que recebe os atributos a aplicar ao controle próprio.
`label`*	`ReactNode`	`—`	Rótulo visível do controle.
`error`	`string`	`—`	Mensagem de erro que marca o controle como inválido.
`hint`	`string`	`—`	Texto de apoio abaixo do controle. Some enquanto houver `error`.
`id`	`string`	`—`	Id estável do controle. Quando omitido, um id acessível é gerado.