বিল্ট-ইন ব্রাউজার <option> কম্পোনেন্ট আপনাকে একটি <select> বক্সের মধ্যে একটি অপশন তৈরি করার সুযোগ দেয়।

<select>
  <option value="someOption">Some option</option>
  <option value="otherOption">Other option</option>
</select>

রেফারেন্স

<option>

বিল্ট-ইন ব্রাউজার <option> কম্পোনেন্ট আপনাকে একটি <select> বক্সের মধ্যে একটি অপশন তৈরি করার সুযোগ দেয়।

<select>
  <option value="someOption">Some option</option>
  <option value="otherOption">Other option</option>
</select>

নিচে আরো উদাহরণ দেখুন।

প্রপ

<option> সকল কমন এলিমেন্ট প্রপের সাপোর্ট দেয়।

সাথে সাথে, <option> এই প্রপগুলোর সাপোর্ট দেয়ঃ

  • disabled: একটি বুলিয়ান. true হলে, অপশন সিলেক্ট করা যাবে না এবং dimmed দেখাবে এটাকে।
  • label: একটি স্ট্রিং। অপশনটা কী বুঝাচ্ছে সেটা নির্দেশ করে। যদি নির্দিষ্ট না করা হয়, তবে অপশনের মধ্যকার টেক্সট ব্যবহৃত হয়।
  • value: যখন একটা ফর্মে প্যারেন্ট <select> সাবমিট করা হয় তখন এই অপশনটা সিলেক্ট করা হলে যেই ভ্যালু ব্যবহৃত হবে।

সতর্কতা

  • React <option> এ selected এট্রিবিউট সাপোর্ট করে না। বরং, একটি অনিয়ন্ত্রিত সিলেক্ট বক্সের জন্য এই অপশনের value প্যারেন্ট <select defaultValue> এ পাস করে দিন, অথবা একটি নিয়ন্ত্রিত সিলেক্ট এর জন্য <select value> এ পাস করুন।

ব্যবহার

অপশন সহ একটি সিলেক্ট বক্স প্রদর্শন করা

একটি সিলেক্ট বক্স প্রদর্শনের জন্য একটি <option> এর লিস্ট সহ <select> রেন্ডার করুন। প্রতিটা <option> এ একটি value দিন যারা ফর্মে সাবমিট হতে চলা ডেটার প্রতিনিধিত্ব করে।

<option> এর তালিকা সহ <select> প্রদর্শন করা নিয়ে আরো পড়ুন।

export default function FruitPicker() {
  return (
    <label>
      Pick a fruit:
      <select name="selectedFruit">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
      </select>
    </label>
  );
}
পূর্ববর্তী পেইজ<input>পরবর্তী পেইজ<progress>

এই ডকুমেন্টেশনগুলো আপনার কতটুকু ভাল লাগছে?