Negocios

Field

Componente customizado que envolve qualquer input com label, descrição e mensagem de erro de forma consistente.

Visão geral

O Field é um wrapper que adiciona label, description e error a qualquer componente de input do design system.

Demo básica

Digite seu nome como aparece no documento.

Import

import { Field } from "@/components/field"

Estados

O Field suporta quatro estados: padrão, com descrição, com erro e desabilitado.

Texto de apoio para orientar o usuário.

Campo marcado como obrigatório.

Para textos longos.

O Field também funciona com checkboxes.

Padrão de implementação

Como usar o Field com diferentes tipos de input no projeto.

Field com Input

import { Field } from "@/components/field"
import { Input } from "@/components/ui/input"

<Field
  label="E-mail"
  htmlFor="email"
  required
  description="Use seu e-mail corporativo."
>
  <Input id="email" type="email" placeholder="nome@empresa.com" />
</Field>

Field com erro

<Field
  label="Senha"
  htmlFor="senha"
  error="A senha deve ter pelo menos 8 caracteres."
>
  <Input
    id="senha"
    type="password"
    aria-invalid  // ativa o estilo de erro no input
  />
</Field>

Formulário completo

<form className="flex flex-col gap-4 max-w-sm">
  <Field label="Nome" htmlFor="nome" required>
    <Input id="nome" />
  </Field>
  <Field label="E-mail" htmlFor="email" required>
    <Input id="email" type="email" />
  </Field>
  <Field label="Mensagem" htmlFor="msg">
    <Textarea id="msg" rows={4} />
  </Field>
  <Button type="submit">Enviar</Button>
</form>

Props e uso

API do componente Field customizado.

Props

label

string

Rótulo do campo. Associado via htmlFor.

htmlFor

string

ID do input ao qual o label está associado.

required

boolean

Exibe asterisco vermelho no label.

description

string

Texto de apoio exibido abaixo do input (oculto quando há error).

error

string

Mensagem de erro exibida abaixo do input com role='alert'.

children

ReactNode

O input, select, textarea ou qualquer campo de formulário.

className

string

Classes adicionais para o container.

Acessibilidade

O label é associado ao input via htmlFor. Sempre forneça um valor igual ao id do input filho.

A mensagem de erro usa role="alert" para ser anunciada imediatamente por leitores de tela.

Inputs com erro devem receber aria-invalid para ativar o estilo visual correto.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter