RDM Select Demo

Modern, özelleştirilebilir ve erişilebilir bir select komponenti.

Kaynak kodu: GitHub

Canlı Demo

Türkiye Amerika Birleşik Devletleri Almanya Fransa

Kullanım ve Özellikler

Farklı varyasyonlar ve tüm özellikler aşağıda örneklenmiştir.

Temel Kullanım

JavaScript ile Options

Seçilen: -
HTML + JavaScript
<rdm-select id="basic-select" 
  label="Ülke Seçin" 
  placeholder="Bir ülke seçin"
  clearable>
</rdm-select>

<script>
const basicSelect = document.getElementById('basic-select');
basicSelect.options = [
  { value: 'tr', label: 'Türkiye' },
  { value: 'us', label: 'Amerika Birleşik Devletleri' },
  { value: 'de', label: 'Almanya' },
  { value: 'fr', label: 'Fransa' }
];
</script>

HTML ile Options

İstanbul Ankara İzmir Bursa
HTML Kodu
<rdm-select 
  label="Şehir Seçin" 
  placeholder="Bir şehir seçin" 
  clearable>
  <rdm-select-option value="istanbul">İstanbul</rdm-select-option>
  <rdm-select-option value="ankara">Ankara</rdm-select-option>
  <rdm-select-option value="izmir">İzmir</rdm-select-option>
  <rdm-select-option value="bursa">Bursa</rdm-select-option>
</rdm-select>

Boyutlar ve Durumlar

Küçük Boyut

HTML Kodu
<rdm-select 
  size="small" 
  label="Küçük Select" 
  placeholder="Küçük boyut"
  clearable>
  <option value="1">Seçenek 1</option>
  <option value="2">Seçenek 2</option>
</rdm-select>

Büyük Boyut

HTML Kodu
<rdm-select 
  size="large" 
  label="Büyük Select" 
  placeholder="Büyük boyut"
  clearable>
  <option value="1">Seçenek 1</option>
  <option value="2">Seçenek 2</option>
</rdm-select>

Devre Dışı

Label Olmadan

Seçenek 1 Seçenek 2 Seçenek 3
HTML Kodu
<rdm-select 
  placeholder="Sadece placeholder"
  clearable>
  <rdm-select-option value="opt1">Seçenek 1</rdm-select-option>
  <rdm-select-option value="opt2">Seçenek 2</rdm-select-option>
  <rdm-select-option value="opt3">Seçenek 3</rdm-select-option>
</rdm-select>

Hata Durumu

Icon Örnekleri

Sol Icon

Türkiye Amerika Almanya Fransa
HTML Kodu
<rdm-select 
  label="Ülke Seçin" 
  placeholder="Ülke seçin"
  icon="🌍"
  icon-position="left">
  <rdm-select-option value="tr">Türkiye</rdm-select-option>
  <rdm-select-option value="us">Amerika</rdm-select-option>
  <rdm-select-option value="de">Almanya</rdm-select-option>
  <rdm-select-option value="fr">Fransa</rdm-select-option>
</rdm-select>

Sağ Icon

Teknoloji Tasarım Pazarlama
HTML Kodu
<rdm-select 
  label="Kategori" 
  placeholder="Kategori seçin"
  icon="📁"
  icon-position="right">
  <rdm-select-option value="tech">Teknoloji</rdm-select-option>
  <rdm-select-option value="design">Tasarım</rdm-select-option>
  <rdm-select-option value="marketing">Pazarlama</rdm-select-option>
</rdm-select>

Kullanıcı Icon (Font Awesome)

Admin Kullanıcı Misafir
HTML Kodu
<rdm-select 
  label="Kullanıcı Tipi" 
  placeholder="Tip seçin"
  icon-class="fas fa-user"
  icon-position="left"
  size="large">
  <rdm-select-option value="admin">Admin</rdm-select-option>
  <rdm-select-option value="user">Kullanıcı</rdm-select-option>
  <rdm-select-option value="guest">Misafir</rdm-select-option>
</rdm-select>

Para Birimi (Font Awesome)

TRY - Türk Lirası USD - Amerikan Doları EUR - Euro GBP - İngiliz Sterlini
HTML Kodu
<rdm-select 
  label="Para Birimi" 
  placeholder="Para birimi seçin"
  icon-class="fas fa-dollar-sign"
  icon-position="left"
  clearable>
  <rdm-select-option value="try">TRY - Türk Lirası</rdm-select-option>
  <rdm-select-option value="usd">USD - Amerikan Doları</rdm-select-option>
  <rdm-select-option value="eur">EUR - Euro</rdm-select-option>
  <rdm-select-option value="gbp">GBP - İngiliz Sterlini</rdm-select-option>
</rdm-select>

Zaman Dilimi (Sağ Icon)

İstanbul (UTC+3) UTC (UTC+0) New York (UTC-5) Los Angeles (UTC-8)
HTML Kodu
<rdm-select 
  label="Zaman Dilimi" 
  placeholder="Zaman dilimi seçin"
  icon-class="fas fa-clock"
  icon-position="right"
  search-bar>
  <rdm-select-option value="ist">İstanbul (UTC+3)</rdm-select-option>
  <rdm-select-option value="utc">UTC (UTC+0)</rdm-select-option>
  <rdm-select-option value="est">New York (UTC-5)</rdm-select-option>
  <rdm-select-option value="pst">Los Angeles (UTC-8)</rdm-select-option>
</rdm-select>

E-posta (Label Olmadan)

Gmail Outlook Yahoo Mail iCloud Mail
HTML Kodu
<rdm-select 
  placeholder="E-posta sağlayıcısı seçin"
  icon-class="fas fa-envelope"
  icon-position="left"
  clearable>
  <rdm-select-option value="gmail">Gmail</rdm-select-option>
  <rdm-select-option value="outlook">Outlook</rdm-select-option>
  <rdm-select-option value="yahoo">Yahoo Mail</rdm-select-option>
  <rdm-select-option value="icloud">iCloud Mail</rdm-select-option>
</rdm-select>

Çoklu Seçim + Icon

Türkçe English Deutsch Français Español
HTML Kodu
<rdm-select 
  label="Diller" 
  placeholder="Dil seçin"
  icon="🗣️"
  icon-position="left"
  multiple
  option-style="checkbox">
  <rdm-select-option value="tr">Türkçe</rdm-select-option>
  <rdm-select-option value="en">English</rdm-select-option>
  <rdm-select-option value="de">Deutsch</rdm-select-option>
  <rdm-select-option value="fr">Français</rdm-select-option>
  <rdm-select-option value="es">Español</rdm-select-option>
</rdm-select>

Validation Durumları

Hata Durumu

HTML Kodu
<rdm-select 
  label="E-posta Adresi" 
  placeholder="E-posta girin"
  required
  validation-state="invalid"
  invalid-text="Geçerli bir e-posta adresi girin!"
  clearable>
  <option value="invalid@">invalid@</option>
  <option value="test@example.com">test@example.com</option>
  <option value="user@domain.org">user@domain.org</option>
</rdm-select>

Uyarı Durumu

HTML Kodu
<rdm-select 
  label="Şifre Gücü" 
  placeholder="Şifre gücü seçin"
  validation-state="warning"
  warning-text="Güçlü şifre önerilir!"
  clearable>
  <option value="weak">Zayıf</option>
  <option value="medium">Orta</option>
  <option value="strong">Güçlü</option>
</rdm-select>

Başarı Durumu

Zorunlu Alan

Custom Mesajlar

Dinamik Validation

Gelişmiş Özellikler

Arama Özellikli

HTML + JavaScript
<rdm-select id="search-select"
  label="Programlama Dili" 
  placeholder="Dil seçin"
  search-bar
  search-bar-placeholder="Dil ara..."
  search-not-found-text="Sonuç bulunamadı"
  clearable>
</rdm-select>

<script>
const searchSelect = document.getElementById('search-select');
searchSelect.options = [
  { value: 'js', label: 'JavaScript' },
  { value: 'ts', label: 'TypeScript' },
  { value: 'py', label: 'Python' },
  { value: 'java', label: 'Java' },
  { value: 'cs', label: 'C#' },
  { value: 'cpp', label: 'C++' },
  { value: 'php', label: 'PHP' },
  { value: 'ruby', label: 'Ruby' },
  { value: 'go', label: 'Go' },
  { value: 'rust', label: 'Rust' },
  { value: 'swift', label: 'Swift' },
  { value: 'kotlin', label: 'Kotlin' }
];
</script>

Yardım Metni ile

Başlangıç Orta İleri Uzman

Option Borders

Border Olmadan (Varsayılan)

Seçenek 1 Seçenek 2 Seçenek 3 Seçenek 4

Border ile

Seçenek 1 Seçenek 2 Seçenek 3 Seçenek 4

Option Stilleri

Checkbox Stili

HTML Kodu
<rdm-select 
  name="checkbox-style" 
  label="Checkbox Görünüm"
  placeholder="Seçenekleri işaretle" 
  option-style="checkbox"
  multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="react">React</option>
  <option value="vue">Vue.js</option>
  <option value="angular">Angular</option>
</rdm-select>

Radio Stili

Checkbox + Border

Radio + Border

Programatik Kontrol

API Metodları

Kırmızı Yeşil Mavi
Seçilen: -
HTML + JavaScript Kodu
<!-- HTML -->
<rdm-select id="api-select" 
  label="Kontrol Edilebilir Select" 
  placeholder="Seçim yapın"
  clearable>
  <rdm-select-option value="red">Kırmızı</rdm-select-option>
  <rdm-select-option value="green">Yeşil</rdm-select-option>
  <rdm-select-option value="blue">Mavi</rdm-select-option>
</rdm-select>

<div class="button-group">
  <button onclick="apiSelect.open()">Aç</button>
  <button onclick="apiSelect.close()">Kapat</button>
  <button onclick="apiSelect.value = 'green'">Yeşil Seç</button>
  <button onclick="apiSelect.clear()">Temizle</button>
</div>

<!-- JavaScript -->
<script>
const apiSelect = document.getElementById('api-select');

apiSelect.addEventListener('rdm-select', (e) => {
  console.log('Seçilen değer:', e.detail.value);
});
</script>

Attribute Referansı

rdm-select bileşeninde kullanabileceğiniz tüm attribute'lar ve açıklamaları:

Attribute Tip Varsayılan Açıklama Örnek
namestring-Form alanının adıname="country"
valuestringnullSeçili değervalue="turkey"
labelstring-Üst etiket metnilabel="Ülke Seçin"
placeholderstring"Select an option"Placeholder metniplaceholder="Seçim yapın"
sizesmall | medium | largemediumBileşen boyutusize="large"
requiredbooleanfalseZorunlu alan (label'da * gösterir)required
disabledbooleanfalseDevre dışı durumudisabled
clearablebooleanfalseTemizle butonu gösterirclearable
multiplebooleanfalseÇoklu seçim modumultiple
search-barbooleanfalseArama çubuğu eklersearch-bar
search-bar-placeholderstring"Search..."Arama çubuğu placeholder'ısearch-bar-placeholder="Ara..."
search-not-found-textstring"No results found"Sonuç bulunamadı metnisearch-not-found-text="Bulunamadı"
option-bordersbooleanfalseSeçenekler arası çizgioption-borders
option-styledefault | checkbox | radiodefaultSeçenek görünüm stilioption-style="checkbox"
validation-statedefault | invalid | warning | successdefaultValidation durumuvalidation-state="invalid"
help-textstring-Yardım metni (gri)help-text="Bu alan zorunludur"
invalid-textstring-Hata mesajı (kırmızı)invalid-text="Geçersiz seçim!"
warning-textstring-Uyarı mesajı (turuncu)warning-text="Dikkat gerekli!"
success-textstring-Başarı mesajı (yeşil)success-text="Başarılı!"
iconstring-Custom icon (emoji veya text)icon="🌍"
icon-classstring-CSS class ile icon (Font Awesome vb.)icon-class="fas fa-user"
icon-positionleft | rightleftIcon konumuicon-position="right"

JavaScript API Metodları

element.open()

Dropdown'ı açar

element.close()

Dropdown'ı kapatır

element.clear()

Seçimi temizler

element.focus()

Elemente odaklanır

element.value

Değeri alır/ayarlar

element.options

Seçenekleri ayarlar

Event Dinleme

element.addEventListener('rdm-select', (e) => {
  console.log('Seçilen değer:', e.detail.value);
});