Input

کامپوننت Input برای دریافت متن، عدد، ایمیل و مقادیر مشابه از کاربر استفاده می‌شود. بر پایه‌ی تگ استاندارد <input> ساخته شده، پس تمام ویژگی‌های بومی HTML (مثل placeholder, type, onChange, value و ...) را هم می‌پذیرد.

Import

import { Input } from "fara-ui";

اگر هنوز FaraUI را نصب و راه‌اندازی نکرده‌ای، ابتدا صفحه‌ی شروع به کار را ببین.

Basic Usage

import { Input } from "fara-ui";

export function EmailField() {
  return (
    <div>
      <label htmlFor="email">ایمیل</label>
      <Input id="email" type="email" placeholder="you@example.com" />
    </div>
  );
}

تمام ویژگی‌های native input مثل type, name, required, min, max و autoComplete را می‌توانی مستقیماً پاس بدهی.

Controlled and Uncontrolled

برای کنترل مقدار در React، از value و onChange استفاده کن:

import { useState } from "react";
import { Input } from "fara-ui";

export function ControlledInput() {
  const [email, setEmail] = useState("");

  return (
    <div>
      <Input
        type="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
        placeholder="ایمیل خود را وارد کنید"
      />
      <p>مقدار فعلی: {email || "—"}</p>
    </div>
  );
}

برای فرم‌های ساده می‌توانی از حالت uncontrolled با defaultValue استفاده کنی:

<Input name="username" defaultValue="farhad" placeholder="نام کاربری" />

Playground

error

disabled

placeholder

<Input placeholder="ایمیل خود را وارد کنید" />

Error State

با فعال‌کردن error، حاشیه‌ی ورودی قرمز می‌شود؛ برای نمایش خطای اعتبارسنجی فرم استفاده کن. معمولاً کنارش یک پیام خطا (مثلاً با کامپوننت Text) هم نمایش داده می‌شود.

function PasswordField({ errorMessage }) {
  const hasError = Boolean(errorMessage);

  return (
    <div>
      <label htmlFor="password">رمز عبور</label>
      <Input
        id="password"
        type="password"
        error={hasError}
        aria-invalid={hasError}
        aria-describedby={hasError ? "password-error" : undefined}
      />
      {errorMessage && (
        <small id="password-error" role="alert">
          {errorMessage}
        </small>
      )}
    </div>
  );
}

Common Input Types

<Input type="text" placeholder="نام" />
<Input type="email" placeholder="ایمیل" autoComplete="email" />
<Input type="password" placeholder="رمز عبور" autoComplete="new-password" />
<Input type="number" min={0} max={100} placeholder="سن" />
<Input type="date" />
<Input type="search" placeholder="جستجو" />

Data Attributes and Customize CSS

Input خودش عنصر ریشه است و این attributeها را تولید می‌کند:

<input data-fara-input data-error="true" />

Attribute	کاربرد
data-fara-input	شناسایی خود عنصر input
data-error	هنگام error={true} روی input قرار می‌گیرد

برای یک input خاص، از className استفاده کن:

<Input className="search-input" placeholder="جستجو..." />

.search-input {
  max-width: 360px;
  border-radius: 12px;
}

برای styling سراسری یا مبتنی بر حالت:

[data-fara-input] {
  min-height: 40px;
}

[data-fara-input][data-error] {
  border-color: #dc2626;
}

Accessibility

• برای دسترسی‌پذیری کامل، همیشه یک <label> مرتبط (با htmlFor) یا aria-label برای هر Input در نظر بگیر — فقط placeholder جایگزین مناسبی برای برچسب نیست.
• در حالت error، aria-invalid="true" و در صورت وجود پیام، aria-describedby را تنظیم کن.
• برای پیام خطا از role="alert" استفاده کن تا برای screen reader اعلام شود.

Props

Prop	Type	Default	Description
error	boolean	false	نمایش حالت خطا (حاشیه‌ی قرمز)
className	string	-	کلاس CSS اضافی برای سفارشی‌سازی
ref	Ref<HTMLInputElement>	-	دسترسی مستقیم به المان DOM ورودی

علاوه بر موارد بالا، تمام ویژگی‌های استاندارد <input> (مثل type, value, onChange, placeholder, disabled, aria-* و ...) نیز پشتیبانی می‌شوند.