یه ردیف چیپ برای انتخاب؛ چیپی که می‌زنی ورم می‌کنه و بقیه با یه حرکتِ فنری کنار می‌رن.

وابستگی‌ها

نوع تعامل

هر چیپی رو بزنی، خودش بزرگ‌تر می‌شه و بقیه کمی جمع می‌شن و کنار می‌رن؛ هرچی دورتر، دیرتر. با کلیدهای جهت هم بین گزینه‌ها جابه‌جا می‌شی و Home/End می‌رن به دو سر. انتخاب با کلیک و کیبورد یک‌جوره، پس هر دو حسِ یکسانی می‌دن.

پراپ‌ها

گزینه‌هایی که می‌تونی به کامپوننت بدی؛ ستاره‌دارها اجباری‌اند.

نصب

{
  "registries": {
    "@farsify": "https://farsify.ir/r/{name}.json"
  }
}

نمونه

"use client";

import { JellyRadio } from "@/components/farsify/jelly-radio";

export function VolumeLevel() {
  return (
    <JellyRadio
      ariaLabel="سطح صدا"
      items={["خاموش", "کم", "متوسط", "زیاد", "بیشینه"]}
      defaultValue="متوسط"
      onChange={(value) => console.log(value)}
    />
  );
}

// با رنگ‌های برند و اندازه‌ی بزرگ
<JellyRadio
  size="lg"
  chipColor="var(--color-brand)"
  activeColor="#ffffff"
  textColor="#ffffff"
  activeTextColor="var(--brand)"
/>

نکته‌ها

• برای انتخاب‌های پرتکرار `bounce` رو حدود ۰.۱۵ بذار؛ جهشِ کمتر، آروم‌تر.
• اگه متنِ چیپ‌ها بلنده، `size` رو بزرگ کن نه `gap` رو؛ فاصله‌ی زیاد گروه رو می‌پاشه.
• رنگ‌ها رو با متغیرِ CSS هم می‌تونی بدی، مثل `var(--color-brand)`.

مجوز

کد بعد از نصب مالِ خودته؛ هر تغییری خواستی بده و توی پروژه‌ی خودت نگهش دار. برای پروژه‌های شخصی و تجاری آزاده، حتی اگه کدت بسته باشه. فقط اسم و لینک فارسی‌فای رو یه جا توی پروژه نگه دار.