زر اختيار Radio

اختيار واحد من بين مجموعة خيارات، ويدعم الاستخدام المنفرد أو مع LhRadioGroup.

الاستخدام الأساسي

اختيار مجموعة

رسم الحبردانتشينغالمساحة الفارغةغونغبي (معطّل)

المحدد: ink

import { useState } from 'react'
import { LhRadio, LhRadioGroup } from '@lh-ui/react'

export default function Demo() {
  const [value, setValue] = useState('ink')

  return (
    <LhRadioGroup value={value} onChange={(val) => setValue(val as string)}>
      <LhRadio value="ink">رسم الحبر</LhRadio>
      <LhRadio value="danqing">ألوان دانتشينغ</LhRadio>
      <LhRadio value="blank">مساحة فارغة</LhRadio>
    </LhRadioGroup>
  )
}

Radio Props

الخاصية	الوصف	النوع	القيم المتاحة	الافتراضي
value	قيمة الخيار (مطلوبة)	unknown	—	—
checked	حالة التحديد المتحكَّم بها (عند الاستخدام المنفرد)	boolean	—	—
defaultChecked	التحديد الافتراضي غير المتحكَّم به	boolean	—	false
label	النص الظاهر	string	—	—
disabled	معطّل	boolean	—	false
size	الحجم	'large' | 'middle' | 'small'	—	يُكتسَب من ConfigProvider
name	الخاصية الأصلية name (تُمرَّر عبر Group)	string	—	—
sx	خصائص تخطيط سريعة	SxProps	—	—

Radio أحداث

الحدث	الوصف	معامل الاستدعاء	المقابل في Vue
onChange	يُطلَق عند التحديد (معاملان)	(checked: boolean, event: ChangeEvent) => void	@change

RadioGroup Props

الخاصية	الوصف	النوع	الافتراضي
value	قيمة التحديد المتحكَّم بها	unknown	—
defaultValue	القيمة الافتراضية غير المتحكَّم بها	unknown	—
disabled	تعطيل جميع العناصر الفرعية	boolean	false
size	حجم العناصر الفرعية	'large' | 'middle' | 'small'	يُكتسَب من ConfigProvider
name	الخاصية الأصلية name المُمرَّرة إلى العناصر الفرعية	string	—

RadioGroup أحداث

الحدث	الوصف	معامل الاستدعاء	المقابل في Vue
onChange	تغيُّر التحديد، ومعامل الاستدعاء هو قيمة الخيار المحدد	(value: unknown) => void	@change

فروق معاملات onChange

استدعاء onChange في LhRadio هو (checked, event)، بينما يكون استدعاء onChange في LhRadioGroup مباشرةً value للعنصر المحدد — وذلك يتوافق مع CheckboxGroup.

الأنماط

import '@lh-ui/react/style/radio'