ورودی با آیکون (InputWithIcon)
فیلد ورودی با آیکون در ابتدا یا انتها.
معرفی
فیلد ورودی با قابلیت قرار دادن آیکون در ابتدا یا انتهای آن.
چه زمانی استفاده نکنیم:
- وقتی آیکون باید قابل کلیک باشد — از
InputGroupبا دکمه استفاده کنید - برای جستجو — از
SearchInputاستفاده کنید
استفاده
import { InputWithIcon } from '@parto-system-design/ui'
import { Search } from 'lucide-react'<InputWithIcon startIcon={<Search className="size-4" />} placeholder="جستجو..." />راهنمای استفاده
بکنید
- از آیکونهای معنادار استفاده کنید که هدف فیلد را مشخص میکنند (مانند آیکون جستجو، ایمیل، یا قفل) - آیکون را در
موقعیت مناسب قرار دهید: آیکونهای وضعیت (مانند تیک یا خطا) در انتها و آیکونهای توضیحی در ابتدا - همیشه
aria-labelیاplaceholderتوضیحی برای فیلد تعیین کنید
نکنید
- از آیکونهای تزئینی که معنای خاصی اضافه نمیکنند استفاده نکنید - آیکونهای قابل کلیک را در این کامپوننت قرار ندهید —
به جای آن از
InputGroupبا دکمه استفاده کنید - از دو آیکون همزمان (startIcon و endIcon) بدون دلیل مشخص استفاده نکنید
Props
سایر props به کامپوننت Input پاس داده میشوند.
دسترسیپذیری
- آیکونها با
pointer-events-noneهستند و بر تعامل تأثیر نمیگذارند - از
aria-labelبرای توضیح هدف آیکون استفاده کنید - فوکوس با Tab مستقیماً روی فیلد ورودی قرار میگیرد، نه روی آیکون
- آیکونها
aria-hidden="true"هستند و توسط screen reader خوانده نمیشوند
تعامل با کیبورد
Tab: انتقال فوکوس به فیلد ورودی -Escape: پاک کردن فوکوس (رفتار پیشفرض مرورگر)
کامپوننتهای مرتبط
- Input — اگر نیاز به آیکون ندارید، از Input ساده استفاده کنید
- SearchInput — اگر نیاز به فیلد جستجو با دکمه پاکسازی دارید، SearchInput گزینه بهتری است
- InputGroup — اگر نیاز به prefix/suffix پیچیدهتر یا دکمه قابل کلیک دارید، از InputGroup استفاده کنید