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

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

<option>

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

<select>
  <option value="someOption">بعض الخيارات</option>
  <option value="otherOption">خيارات أخرى</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>

<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> لمعنصر اختيار متحكم فيه.

الاستخدام

عرض عنصر الاختيار مع الخيارات

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>

<option>

المرجع

`<option>`

الخصائص

تنبيه

الاستخدام

عرض عنصر الاختيار مع الخيارات

react@19.2

react-dom@19.2

React Compiler

React DevTools

eslint-plugin-react-hooks

Rules of React

React Server Components

Legacy APIs

<option>

المرجع

`<option>`

الخصائص

تنبيه

الاستخدام

عرض عنصر الاختيار مع الخيارات