FormControl

Apresentação

O componente FormControl é responsável por criar um container para elementos de formulário, fornecendo uma estrutura consistente para labels, inputs e mensagens de erro. Ele é ideal para organizar e estilizar campos de formulário de forma padronizada.

Quando usar

• Para organizar campos de formulário
• Para agrupar labels e inputs
• Para estruturar mensagens de erro
• Para criar layouts de formulário
• Para agrupar campos relacionados
• Para manter consistência visual
• Para melhorar a acessibilidade
• Para organizar validações
• Para estruturar formulários complexos
• Para manter o alinhamento de elementos

Forma básica de uso

import { FormControl } from 'eitri-luminus';

// FormControl básico
<FormControl>
  <label className="label">
    <span className="label-text">Nome</span>
  </label>
  <input type="text" className="input input-bordered" />
</FormControl>

// FormControl com foco no filho
<FormControl sendFocusToChild>
  <span className="label-text">Lembrar-me</span>
  <input type="checkbox" className="checkbox" />
</FormControl>

// FormControl com classes personalizadas
<FormControl className="w-full max-w-xs">
  <label className="label">
    <span className="label-text">Email</span>
  </label>
  <input type="email" className="input input-bordered" />
</FormControl>

// FormControl com mensagem de erro
<FormControl>
  <label className="label">
    <span className="label-text">Senha</span>
  </label>
  <input type="password" className="input input-bordered input-error" />
  <label className="label">
    <span className="label-text-alt text-error">Senha muito curta</span>
  </label>
</FormControl>

// FormControl com múltiplos campos
<FormControl>
  <label className="label">
    <span className="label-text">Endereço</span>
  </label>
  <input type="text" className="input input-bordered" placeholder="Rua" />
  <input type="text" className="input input-bordered mt-2" placeholder="Número" />
  <input type="text" className="input input-bordered mt-2" placeholder="Complemento" />
</FormControl>

// FormControl com checkbox e label
<FormControl sendFocusToChild>
  <div className="flex items-center gap-2">
    <input type="checkbox" className="checkbox" />
    <span className="label-text">Aceito os termos</span>
  </div>
</FormControl>

Propriedades

Propriedade	Tipo	Descrição
sendFocusToChild	boolean	Envia o foco para o elemento filho
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

O componente FormControl herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa a classe 'form-control' para estilização base
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Mantém a semântica HTML apropriada
• Pode conter qualquer tipo de elemento de formulário
• É especialmente útil para organização de formulários
• Pode ser combinado com outros componentes
• Suporta diferentes layouts e estilos
• Melhora a acessibilidade dos formulários
• Pode ser usado para agrupar campos relacionados
• Suporta mensagens de erro e validação
• Pode ser usado em formulários complexos
• Mantém o alinhamento consistente dos elementos
• Suporta diferentes tamanhos e estilos
• Pode ser usado com qualquer tipo de input