nili/ui
enfaartr
كل المكوّنات

Radio

عرض شامل
١٦ تصدير٨ محور تنويع٥٧ خاصيّة٤ ملف
import { Radio, RadioCard, RadioGroup } from '@nili/ui';

هذه صفحة العرض الشامل الخاصة بالمكتبة، معروضة حيّة. غيّر اللغة أو السمة من الأعلى وسَتتبعك.

المجموعة

يشارك RadioGroup اسمًا name بين أزراره — ويولّده إن لم تمرّره. وبدونه لا يعاملها المتصفّح كمجموعة واحدة، وتتوقّف مفاتيح الأسهم عن التنقّل بينها.

Plan
import { Radio, RadioGroup } from "@nili/ui"

export function Example() {
  const [plan, setPlan] = useState("pro")

  return (
    <RadioGroup value={plan} onValueChange={setPlan} title={t('plan.label')}>
      <Radio value="free" label={t('plan.free')} />
      <Radio value="pro" label={t('plan.pro')} />
      <Radio value="team" label={t('plan.team')} />
    </RadioGroup>
  )
}

الاتجاه

رأسي افتراضيًا. ويصلح الأفقي لخيارين أو ثلاثة قصيرة — وما بعدها يلتف الصف وتتوقّف المجموعة عن القراءة.

أفقي
مجموعة معطّلة وغير صالحة
اختر واحدًا
import { Radio, RadioGroup } from "@nili/ui"

export function Example() {
  return (
    <RadioGroup orientation="horizontal" defaultValue="monthly" label="Billing">
      <Radio value="monthly" label={t('billing.monthly')} />
      <Radio value="yearly" label={t('billing.yearly')} />
    </RadioGroup>
  )
}

صف التسمية

الفتحات الأربع نفسها في Checkbox: sublabel وbadge وdescription وlinkButton. ويقلب labelPosition العنصر إلى الجهة الأخرى.

Plan
(الأكثر شيوعًا)وفّر ٢٠٪كل ما في الخطة المجانية، مع مشاريع بلا حدود.قارن الخطط
مشروع واحد ومقعد واحد.
import { Radio, RadioGroup, Badge, LinkButton } from "@nili/ui"

export function Example() {
  return (
    <RadioGroup defaultValue="pro" title={t('plan.label')}>
      <Radio
        value="pro"
        label="Pro"
        sublabel="(most popular)"
        badge={<Badge size="small" color="blue" appearance="lighter">Save 20%</Badge>}
        description="Everything in Free, plus unlimited projects."
        linkButton={<LinkButton href="#" size="sm">Compare plans</LinkButton>}
      />
      <Radio value="free" label="Free" description="One project, one seat." />
    </RadioGroup>
  )
}

بطاقة اختيار

زر اختيار مرسوم كلوحة قابلة للاختيار — منتقي الخطط ووسائل الدفع. وأنواع فيجما الستة هي فتحة startAdornment واحدة: لو كانت قائمة ثابتة لتنافت، ولاحتاج النوع السابع إلى إصدار جديد.

وسيلة الدفع
import { RadioGroup, RadioCard, KeyIcon, Icon } from "@nili/ui"
import { RiBankCardLine, RiWallet3Line } from "@remixicon/react"

export function Example() {
  const [method, setMethod] = useState("card")

  return (
    <RadioGroup value={method} onValueChange={setMethod} title="Payment method">
      <RadioCard
        value="card"
        label="Card"
        description="Visa, Mastercard or a local card."
        startAdornment={
          <KeyIcon size="md" color="blue"><Icon icon={RiBankCardLine} /></KeyIcon>
        }
      />
      <RadioCard
        value="wallet"
        label="Wallet"
        sublabel="balance ۱۲۰٬۰۰۰"
        startAdornment={
          <KeyIcon size="md" color="green"><Icon icon={RiWallet3Line} /></KeyIcon>
        }
      />
    </RadioGroup>
  )
}