یه چک‌باکس که با تیک‌خوردن پر می‌شه، تیک می‌زنه و متنش رو خط می‌کشه.

وابستگی‌ها

نوع تعامل

با هر کلیک، خانه از وسط پر می‌شه، کمی ورم می‌کنه و تیک میاد؛ هم‌زمان متن کم‌رنگ می‌شه و یه خط از روش رد می‌شه. Space و Enter هم همین کارو می‌کنن، ولی بی‌انیمیشن.

پراپ‌ها

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

نصب

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

نمونه

"use client";

import { useState } from "react";
import { SpringCheck } from "@/components/farsify/spring-check";

export function TodoItem() {
  const [done, setDone] = useState(false);

  return (
    <SpringCheck
      label="ساخت بیلد"
      checked={done}
      onChange={setDone}
    />
  );
}

// بدون کنترل — مقدار اولیه‌ی تیک‌خورده
<SpringCheck label="هماهنگی جلسه" defaultChecked />

// رنگ برند، خانه‌ی بزرگ‌تر و خط از وسط
<SpringCheck
  label="به‌روزرسانی تغییرات"
  color="var(--color-brand)"
  fillColor="var(--color-brand)"
  checkColor="#ffffff"
  boxSize={34}
  strike="center"
/>

نکته‌ها

• برای فهرست کارها `bounce` رو حدود ۰.۱ و `strikeLag` رو صفر بذار؛ حرکت کمتر بهتره.
• اگه رنگ برند می‌دی، حواست به کنتراست `fillColor` و `checkColor` باشه؛ وگرنه تیک دیده نمی‌شه.
• با `strike="none"` متن فقط کم‌رنگ می‌شه؛ برای برچسب‌های بلند همین بهتره.

مجوز

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