<option>

Web Tarayıcısının <option> bileşeni, <select> kutusu içinde bir seçenek sunmanıza olanak tanır.

<select>
   <option value="birSecenek">Bir seçenek</option>
   <option value="digerSecenek">Diğer seçenek</option>
</select>

Başvuru dokümanı
- <option>
Kullanım
- Seçenekler içeren bir seçim kutusu gösterme

Başvuru dokümanı

`<option>`

Web Tarayıcısının <option> bileşeni <select> kutusunun içinde bir seçenek oluşturmanıza olanak tanır.

<select>
   <option value="birSecenek">Bir seçenek</option>
   <option value="digerSecenek">Diğer seçenek</option>
</select>

Buradan daha fazla örnek görebilirsiniz.

Prop’lar

<option>, tüm genel öğe özelliklerini destekler.

Ayrıca, <option> bu özellikleri de destekler:

disabled: Boolean. Eğer true ise, seçenek seçilemez ve soluk görünür.
label: Dize. Seçeneğin anlamını belirtir. Eğer dahil edilmezse, seçenek içindeki metin kullanılır.
value: Eğer bu seçenek seçilirse, üst eleman <select> öğesini bir formda gönderirken kullanılacak değeri belirtir.

Uyarılar

React, <option> öğesinde selected özelliğini desteklemez. Bunun yerine, bu seçeneğin value değerini ebeveyn <select defaultValue> öğesine aktararak kontrolsüz bir seçim kutusu oluşturun veya <select value> öğesine aktararak kontrollü bir seçim kutusu oluşturun.

Kullanım

Seçenekler içeren bir seçim kutusu gösterme

Seçim kutusu oluşturmak için, içerisinde <option> bileşenleri bulunan <select> öğesi kullanın. Her bir <option> bileşenine, form ile gönderilecek verileri temsil eden bir value değeri atayın.

İçerisinde <option> bileşenleri bulunan bir <select> öğesini göstermek hakkında daha fazla bilgi edinin.

Fork

export default function MeyveSecici() {
  return (
    <label>
      Bir meyve seçin:
      <select name="secilenMeyve">
        <option value="apple">Elma</option>
        <option value="banana">Muz</option>
        <option value="orange">Portakal</option>
      </select>
    </label>
  );
}

Previous<input>

Next<progress>