@dinefy/react-input

Dinefy React Web UI - input component powered by Ark UI

Installation

npm install @dinefy/react-input @ark-ui/react

Usage

Basic Usage

import { Input } from "@dinefy/react-input";

function MyForm() {
  return (
    <Input.Root>
      <Input.Label>Email</Input.Label>
      <Input.Field placeholder="Enter your email" />
      <Input.HelperText>We'll never share your email</Input.HelperText>
    </Input.Root>
  );
}

With Variants

<Input.Root>
  <Input.Label variant="error">Email</Input.Label>
  <Input.Field variant="error" placeholder="Enter your email" />
  <Input.HelperText variant="error">This field is required</Input.HelperText>
</Input.Root>

With Icons

import { Mail, Eye } from "lucide-react";

<Input.Root>
  <Input.Label>Email</Input.Label>
  <Input.Wrapper>
    {/* Left icon: place before the field */}
    <Input.Icon icon={Mail} />
    <Input.Field placeholder="Enter your email" />
    {/* Right icon: place after the field */}
    <Input.Icon icon={Eye} />
  </Input.Wrapper>
  <Input.HelperText>Icons are positioned by their order around the Field</Input.HelperText>
</Input.Root>

Advanced Usage with Ark UI

The component exposes Ark UI's Field components for advanced usage:

import { Input } from "@dinefy/react-input";

<Input.Root invalid>
  <Input.Label>Email</Input.Label>
  <Input.Field />
  <Input.ErrorText>Invalid email address</Input.ErrorText>
</Input.Root>

API

Input.Root

Based on Ark UI's Field.Root. Accepts all Field.Root props.

Input.Field

• variant: "default" | "success" | "error" | "warning"
• size: "sm" | "md" | "lg"
• textAlign: "left" | "center" | "right"
• invalid: boolean
• mask: string (predefined: phone, cpf, cnpj, cep, date, time, currency or any custom pattern like 999-AAA-999)

Input.Label

• variant: "default" | "success" | "error" | "warning"

Input.HelperText

• variant: "default" | "success" | "error" | "warning"

Input.Icon

• icon: Lucide React icon component
• size?: number | string (applies width/height; defaults to 20)

Input.PasswordField

Password input with visibility toggle built-in. Accepts same style variants as Input.Field (e.g., size).

<Input.Root>
  <Input.Label>Password</Input.Label>
  <Input.PasswordField placeholder="Your password" />
  <Input.HelperText>Use 8 or more characters</Input.HelperText>
</Input.Root>

CSS Reset & Autofill Handling

Este componente inclui um reset CSS específico e tratamento avançado de autofill que garante consistência visual independentemente do navegador ou contexto.

Reset CSS

Características:

• Normalização completa de inputs, textareas e selects
• Consistência cross-browser garantida
• Acessibilidade preservada
• Performance otimizada via CSS-in-JS

O que é resetado:

• Box model (margin, padding, border, outline)
• Aparência (appearance, background, box-shadow)
• Tipografia (herda do elemento pai)
• Estados (focus, hover, active, disabled)
• Elementos específicos (spinners, ícones de busca, botões de limpar)
• Placeholders (normalização de opacidade e cor)

Autofill Cross-Browser

Suporte completo para:

• Chrome/Safari (:-webkit-autofill)
• Firefox (:autofill)
• Edge/IE (compatibilidade)

Funcionalidades:

• Mantém cores do design system durante autofill
• Preserva transições e animações
• Suporte a todos os estados (hover, focus, invalid)
• Background customizado que sobrescreve o amarelo padrão
• Text color forçado com !important para garantir legibilidade

Implementação Automática

import { Input } from "@dinefy/react-input";
// Reset CSS e autofill handling aplicados automaticamente

Dependencies

This component requires:

• @ark-ui/react (peer dependency)
• lucide-react (peer dependency)
• @dinefy/theme-web
• @dinefy/tokens-default