يتيح لك مكون الـ <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 تمثل البيانات التي سيتم رفعها مع النموذج.

اقرأ المزيد حول عرض <select> بقائمة مكونات <option>.

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>