<option>

يتيح لك مكون الـ <option> المدمج في المتصفح بعرض خيارات داخل مربع <select>.

<select>
  <option value="someOption">بعض الخيارات</option>
  <option value="otherOption">خيارات أخرى</option>
</select>

المرجع

`<option>`

يتيح لك مكون الـ <option> المدمج في المتصفح بعرض خيارات داخل مربع <select>.

<select>
  <option value="someOption">بعض الخيارات</option>
  <option value="otherOption">خيارات أخرى</option>
</select>

انظر الى المزيد من الأمثلة في الأسفل.

الخواص

تدعم <option> جميع خواص العناصر الشائعة.

بالإضافة إلى ذلك ، يدعم <option> هذه الخواص:

disabled: قيمة منطقية. إذا كانت true، فلن يكون الخيار قابلاً للتحديد وسيظهر باهت.
label: سلسلة. تحدد معنى الخيار. إذا لم يتم تحديدها ، فسيتم استخدام النص الموجود داخل الخيار.
value: القيمة التي سيتم استخدامها عند إرسال عنصر الأب <select> في النموذج إذا تم تحديد هذا الخيار.

تنبيه

لا تدعم React سمة selected في <option>. بدلاً من ذلك ، قم بتمرير value هذا الخيار إلى العنصر الأب <select defaultValue> وذلك لمربع تحديد غير متحكم فيه، أو <select value> لمربع تحديد متحكم فيه.

الاستخدام

عرض مربع التحديد مع الخيارات

قم بإنشاء <select> يتضمن داخله قائمة من مكونات <option> لعرض مربع تحديد. أعط كل <option> قيمة <value> تمثل البيانات التي سيتم رفعها مع النموذج.

Fork

export default function FruitPicker() {
  return (
    <label dir= "rtl" >
      اختر فاكهة:
      <select name="selectedFruit">
        <option value="تفاح">تفاح</option>
        <option value="موز">موز</option>
        <option value="برتقال">برتقال</option>
      </select>
    </label>
  );
}

Previous<input>Next<progress>