چک‌باکس (Checkbox)

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

export default function MyComponent() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="terms" />
      <label htmlFor="terms">قوانین را می‌پذیرم</label>
    </div>
  )
}

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

export default function MyComponent() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="remember" />
      <Label htmlFor="remember">مرا به خاطر بسپار</Label>
    </div>
  )
}

import { Checkbox } from '@parto-system-design/ui'
;<Checkbox checked="indeterminate" />

<div className="flex flex-col gap-4" dir="rtl">
  <div className="flex items-center gap-2">
    <Checkbox id="active" />
    <label htmlFor="active">فعال</label>
  </div>
  <div className="flex items-center gap-2">
    <Checkbox id="checked" defaultChecked />
    <label htmlFor="checked">انتخاب‌شده</label>
  </div>
  <div className="flex items-center gap-2">
    <Checkbox id="disabled-cb" disabled />
    <label htmlFor="disabled-cb">غیرفعال</label>
  </div>
  <div className="flex items-center gap-2">
    <Checkbox id="disabled-checked" disabled defaultChecked />
    <label htmlFor="disabled-checked">غیرفعال و انتخاب‌شده</label>
  </div>
</div>