Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Pilih Komponen

Terakhir diperbarui:

Dropdown pilihan Tailwind CSS khusus CSS dengan varian warna primer, sekunder, aksen, dan semantik. Ukuran xs-xl, model hantu. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Komponen tertentu memberi pengguna daftar dropdown berisi opsi yang saling eksklusif, memungkinkan mereka memilih satu nilai dari kumpulan yang telah ditentukan sebelumnya. Dibuat dengan elemen pilihan HTML asli dan disempurnakan dengan gaya Tailwind CSS, pilihan mendukung berbagai ukuran, warna, dan status. Dapat diakses dan dinavigasi dengan keyboard, dropdown pilihan ideal untuk memilih dari daftar opsi besar, pemilihan negara, dan panel preferensi.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Kelas Jenis Keterangan
selectBasisDropdown pilihan asli bergaya
select-softGayaLatar belakang berwarna teredam
select-ghostGayaTidak ada batas yang terlihat sampai fokus
select-dashedGayaGaya perbatasan putus-putus
select-xsUkuranSangat kecil
select-smUkuranKecil
select-mdUkuranSedang (standar)
select-lgUkuranBesar
select-xlUkuranEkstra besar
select-2xlUkuran2× ekstra besar
select-primaryWarnaBatas warna tema utama
select-secondaryWarnaBatas warna tema sekunder
select-accentWarnaBatas warna tema aksen
select-neutralWarnaBatas warna tema netral
select-infoWarnaBatas warna semantik info
select-successWarnaPerbatasan warna semantik sukses
select-warningWarnaBatas warna semantik peringatan
select-errorWarnaBatas warna semantik salah

Penggunaan Dasar

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>

Pilih Ukuran

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>

Pilih Warna

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>

Pilih Gaya

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>

Dinonaktifkan Pilih

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

Pilih dengan Label

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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP memberi editor AI Anda nama dan struktur kelas Memilih yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.

Coba Cherry MCP