ورودی جستجو (SearchInput)

معرفی

کامپوننت SearchInput یک فیلد جستجوی آماده است با آیکون ذره‌بین، دکمه پاک‌کردن (×)، حالت loading و دکمه فیلتر. از همه props استاندارد <input> پشتیبانی می‌کند.

چه زمانی استفاده کنیم:

• برای فیلد جستجوی ساده در بالای لیست‌ها و جداول
• وقتی نیاز به فیلتر کردن محتوای موجود با یک کلمه کلیدی دارید
• در ترکیب با دکمه فیلتر برای جستجوی پیشرفته‌تر

چه زمانی استفاده نکنیم:

• برای جستجوی سراسری با نتایج dropdown — از Command استفاده کنید
• برای فیلترهای پیچیده چندگانه — از FilterBar + MultiSelect استفاده کنید

استفاده

import { SearchInput } from '@parto-system-design/ui'

const [query, setQuery] = useState('')

;<SearchInput value={query} onChange={(e) => setQuery(e.target.value)} onClear={() => setQuery('')} />

با دکمه فیلتر

<SearchInput
  value={query}
  onChange={(e) => setQuery(e.target.value)}
  onClear={() => setQuery('')}
  showFilterButton
  onFilterClick={() => setFilterOpen(true)}
  filterActive={hasActiveFilters}
/>

حالت loading

<SearchInput value={query} isLoading />

اندازه‌ها

<SearchInput size="xs" />
<SearchInput size="sm" />
<SearchInput size="md" />
<SearchInput size="lg" />

Props

حالت‌ها و انواع

اندازه‌ها

چهار اندازه: "xs", "sm", "md", "lg".

با دکمه فیلتر

با showFilterButton دکمه فیلتر در انتها نمایش داده می‌شود. filterActive وضعیت فعال بودن فیلتر را مشخص می‌کند.

حالت بارگذاری

با isLoading اسپینر به جای دکمه پاک‌کردن نمایش داده می‌شود.

با دکمه پاک‌کردن

با onClear دکمه × نمایش داده می‌شود (فقط وقتی فیلد مقدار دارد).

راهنمای استفاده

نکات

• دکمه × فقط زمانی نمایش داده می‌شود که فیلد مقدار دارد و onClear تعریف شده باشد
• در حالت isLoading، دکمه × با spinner جایگزین می‌شود
• از تمام props استاندارد <input> پشتیبانی می‌کند
• مرورگر built-in clear button مخفی می‌شود

دسترسی‌پذیری

• فیلد دارای aria-label پیش‌فرض فارسی بر اساس locale است
• دکمه پاک‌کردن (×) دارای aria-label مناسب برای screen reader است
• دکمه فیلتر با صفحه‌کلید قابل دسترسی است
• role="search" روی wrapper برای شناسایی توسط screen reader
• پشتیبانی کامل از RTL

کامپوننت‌های مرتبط

• اگر نیاز به جستجوی سراسری با نتایج dropdown و کلید میانبر دارید → Command
• اگر نیاز به جستجو با پیشنهادات از API دارید → Autocomplete
• اگر نیاز به فیلترهای چندگانه در کنار جستجو دارید → FilterBar
• اگر فقط نیاز به input ساده بدون آیکون جستجو دارید → Input