<option>

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

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

المرجع
- <option>
الاستخدام
- عرض عنصر الاختيار مع الخيارات

المرجع

`<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>
      اختر فاكهة:
      <select name="selectedFruit">
        <option value="apple">تفاح</option>
        <option value="banana">موز</option>
        <option value="orange">برتقال</option>
      </select>
    </label>
  );
}

Previous<input>Next<progress>