گروه ورودی (Input Group)

معرفی

کامپوننت Input Group برای افزودن addon، آیکون یا دکمه به input استفاده می‌شود.

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

• وقتی نیاز به ترکیب input با addon متنی (مانند https:// یا تومان) دارید
• وقتی نیاز به دکمه عملیاتی در کنار فیلد ورودی دارید
• برای فیلدهایی با prefix/suffix ثابت مانند URL، ایمیل یا مبلغ

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

• وقتی فقط یک آیکون نیاز دارید — از InputWithIcon استفاده کنید
• وقتی prefix/suffix باید قابل کلیک باشد — از InputWithIcon با دکمه استفاده کنید

استفاده

import { InputGroup, InputGroupAddon, InputGroupInput } from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <InputGroup dir="ltr">
      <InputGroupAddon>https://</InputGroupAddon>
      <InputGroupInput placeholder="example.com" type="url" />
    </InputGroup>
  )
}

با آیکون

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

;<InputGroup>
  <InputGroupAddon>
    <Icons.search className="w-4 h-4" />
  </InputGroupAddon>
  <InputGroupInput placeholder="جستجو..." />
</InputGroup>

با دکمه

<InputGroup>
  <InputGroupInput placeholder="ایمیل شما" />
  <InputGroupAddon>
    <InputGroupButton>ارسال</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

چینش عمودی

<InputGroup>
  <InputGroupAddon align="block-start">عنوان</InputGroupAddon>
  <InputGroupInput />
  <InputGroupAddon align="block-end">توضیحات پایین</InputGroupAddon>
</InputGroup>

با Textarea

<InputGroup>
  <InputGroupAddon align="block-start">پیام شما</InputGroupAddon>
  <InputGroupTextarea rows={4} />
</InputGroup>

محتوای LTR (URL، ایمیل، شماره تلفن)

برای فیلدهایی که محتوای انگلیسی یا LTR دارند (مثل URL، ایمیل، شماره تلفن)، از dir="ltr" روی InputGroup استفاده کنید:

{
  /* URL - کل گروه LTR */
}
;<InputGroup dir="ltr">
  <InputGroupAddon>https://</InputGroupAddon>
  <InputGroupInput placeholder="example.com" type="url" />
</InputGroup>

{
  /* ایمیل - کل گروه LTR */
}
;<InputGroup dir="ltr">
  <InputGroupAddon>@</InputGroupAddon>
  <InputGroupInput placeholder="username" type="email" />
</InputGroup>

{
  /* مبلغ - گروه RTL ولی عدد LTR */
}
;<InputGroup>
  <InputGroupAddon align="inline-end">تومان</InputGroupAddon>
  <InputGroupInput placeholder="مبلغ" type="number" />
</InputGroup>

کامپوننت‌ها

Props

InputGroup

InputGroupAddon

InputGroupInput

همه props استاندارد <input> را می‌پذیرد. موارد مهم:

InputGroupButton

InputGroupText

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

با Addon متنی

نمایش متن ثابت در کنار input (مانند https:// یا تومان).

با آیکون

نمایش آیکون در addon.

با دکمه

استفاده از InputGroupButton برای عملیات مانند ارسال یا جستجو.

چینش عمودی

با align="block-start" و align="block-end" addon ها را در بالا و پایین قرار دهید.

با Textarea

استفاده از InputGroupTextarea به جای InputGroupInput.

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

ملاحظات RTL

• برای محتوای LTR (URL، ایمیل، تلفن)، dir="ltr" را روی InputGroup تنظیم کنید
• Input های با type="number" به صورت خودکار LTR می‌شوند ولی گروه RTL می‌ماند (برای نمایش "تومان" در سمت راست)
• از align="inline-end" برای addon های سمت چپ استفاده کنید

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

• InputGroupInput تمام ویژگی‌های استاندارد <input> از جمله aria-label را پشتیبانی می‌کند
• InputGroupButton با صفحه‌کلید قابل دسترسی است
• جهت متن به صورت خودکار برای type="url" و type="email" تنظیم می‌شود
• پشتیبانی کامل از RTL و LTR

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

• اگر فقط نیاز به یک آیکون ساده در کنار input دارید → InputWithIcon
• اگر نیاز به فیلد جستجو با آیکون و دکمه پاک‌کردن دارید → SearchInput
• اگر نیاز به label و error message دارید → Field