Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Select Component

CSS-only Tailwind CSS select dropdown with primary, secondary, accent, and semantic color variants. Sizes xs–xl, ghost style. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Belirli bileşenler, kullanıcılara birbirini dışlayan seçeneklerden oluşan bir açılır liste sağlayarak, önceden tanımlanmış bir kümeden bir değer seçmelerine olanak tanır. Yerel HTML seçme öğeleriyle oluşturulmuş ve Tailwind CSS stiliyle geliştirilmiş seçimler, birden çok boyutu, rengi ve durumu destekler. Erişilebilir ve klavyeyle gezinilebilen seçme açılır menüleri, geniş seçenek listeleri, ülke seçimi ve tercih panelleri arasından seçim yapmak için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

Sınıf Tip Tanım
selectTemelStil sahibi yerel seçim açılır menüsü
select-softStilSessiz renkli arka plan
select-ghostStilOdaklanana kadar görünür kenarlık yok
select-dashedStilKesikli kenarlık stili
select-xsBoyutEkstra küçük
select-smBoyutKüçük
select-mdBoyutOrta (varsayılan)
select-lgBoyutBüyük
select-xlBoyutEkstra büyük
select-2xlBoyut2× ekstra büyük
select-primaryRenkBirincil tema renk sınırı
select-secondaryRenkİkincil tema renk sınırı
select-accentRenkVurgu teması renk sınırı
select-neutralRenkNötr tema renkli kenarlık
select-infoRenkBilgi anlamsal renk sınırı
select-successRenkBaşarı anlamsal renk sınırı
select-warningRenkUyarı anlamsal renk sınırı
select-errorRenkHata anlamsal renk sınırı

Temel Kullanım

1
2
3
4
5
6
<select class="select">
  <option disabled selected>Pick an option</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

1
2
3
4
5
6
<select className="select">
  <option disabled selected>Pick an option</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Boyutları Seçin

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<select class="select select-xs">
  <option>Extra Small</option>
  <option selected>Select</option>
</select>

<select class="select select-sm">
  <option>Small</option>
  <option selected>Select</option>
</select>

<select class="select select-md">
  <option>Medium</option>
  <option selected>Select</option>
</select>

<select class="select select-lg">
  <option>Large</option>
  <option selected>Select</option>
</select>

<select class="select select-xl">
  <option>Extra Large</option>
  <option selected>Select</option>
</select>

<select class="select select-2xl">
  <option>2X Large</option>
  <option selected>Select</option>
</select>

Renkleri Seçin

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<select class="select">
  <option selected>Default</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-primary">
  <option selected>Primary</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-secondary">
  <option selected>Secondary</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-accent">
  <option selected>Accent</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-info">
  <option selected>Info</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-success">
  <option selected>Success</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-warning">
  <option selected>Warning</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-error">
  <option selected>Error</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Stilleri Seç

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<select class="select">
  <option selected>Default Style</option>
  <option>Option 1</option>
</select>

<select class="select select-soft">
  <option selected>Soft</option>
  <option>Option 1</option>
</select>

<select class="select select-dashed">
  <option selected>Dashed</option>
  <option>Option 1</option>
</select>

<select class="select select-ghost">
  <option selected>Ghost</option>
  <option>Option 1</option>
</select>

Devre Dışı Seç

html 
1
2
3
4
<select class="select" disabled>
  <option>Disabled Select</option>
  <option selected>Option 1</option>
</select>

Etiketle Seç

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<label>
  <span>Choose your favorite country</span>
  <select class="select select-outline w-full max-w-xs">
    <option disabled selected>Pick one</option>
    <option>United States</option>
    <option>Canada</option>
    <option>Mexico</option>
    <option>Brazil</option>
  </select>
</label>