---
title: "Select"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Select using native HTML elements. Custom sizes, error states, and grouped options for accessible, theme-aware dropdown form controls."
url: https://frutjam.com/id/components/select
---

# Select Component

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                                 |
| ---------------- | ------ | ------------------------------------------ |
| select           | Basis  | Dropdown pilihan asli bergaya              |
| select-soft      | Gaya   | Latar belakang berwarna teredam            |
| select-ghost     | Gaya   | Tidak ada batas yang terlihat sampai fokus |
| select-dashed    | Gaya   | Gaya perbatasan putus-putus                |
| select-xs        | Ukuran | Sangat kecil                               |
| select-sm        | Ukuran | Kecil                                      |
| select-md        | Ukuran | Sedang (standar)                           |
| select-lg        | Ukuran | Besar                                      |
| select-xl        | Ukuran | Ekstra besar                               |
| select-2xl       | Ukuran | 2× ekstra besar                            |
| select-primary   | Warna  | Batas warna tema utama                     |
| select-secondary | Warna  | Batas warna tema sekunder                  |
| select-accent    | Warna  | Batas warna tema aksen                     |
| select-neutral   | Warna  | Batas warna tema netral                    |
| select-info      | Warna  | Batas warna semantik info                  |
| select-success   | Warna  | Perbatasan warna semantik sukses           |
| select-warning   | Warna  | Batas warna semantik peringatan            |
| select-error     | Warna  | Batas warna semantik salah                 |

## Penggunaan Dasar

## Pilih Ukuran

```html
<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
<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
<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
<select class="select" disabled>
  <option>Disabled Select</option>
  <option selected>Option 1</option>
</select>
```

## Pilih dengan Label

```html
<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>
```