---
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/tr/components/select
---

# Select Component

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                                 |
| ---------------- | ----- | ------------------------------------- |
| select           | Temel | Stil sahibi yerel seçim açılır menüsü |
| select-soft      | Stil  | Sessiz renkli arka plan               |
| select-ghost     | Stil  | Odaklanana kadar görünür kenarlık yok |
| select-dashed    | Stil  | Kesikli kenarlık stili                |
| select-xs        | Boyut | Ekstra küçük                          |
| select-sm        | Boyut | Küçük                                 |
| select-md        | Boyut | Orta (varsayılan)                     |
| select-lg        | Boyut | Büyük                                 |
| select-xl        | Boyut | Ekstra büyük                          |
| select-2xl       | Boyut | 2× ekstra büyük                       |
| select-primary   | Renk  | Birincil tema renk sınırı             |
| select-secondary | Renk  | İkincil tema renk sınırı              |
| select-accent    | Renk  | Vurgu teması renk sınırı              |
| select-neutral   | Renk  | Nötr tema renkli kenarlık             |
| select-info      | Renk  | Bilgi anlamsal renk sınırı            |
| select-success   | Renk  | Başarı anlamsal renk sınırı           |
| select-warning   | Renk  | Uyarı anlamsal renk sınırı            |
| select-error     | Renk  | Hata anlamsal renk sınırı             |

## Temel Kullanım

## Boyutları Seçin

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

## Renkleri Seçin

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

## Stilleri Seç

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

## Devre Dışı Seç

```html
<select class="select" disabled>
  <option>Disabled Select</option>
  <option selected>Option 1</option>
</select>
```

## Etiketle Seç

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