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

# Select Component

Select components provide users with a dropdown list of mutually exclusive options, allowing them to choose one value from a predefined set. Built with native HTML select elements and enhanced with Tailwind CSS styling, selects support multiple sizes, colors, and states. Accessible and keyboard-navigable, select dropdowns are ideal for choosing from large option lists, country selection, and preference panels.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa            | Typ     | Opis                                                          |
| ---------------- | ------- | ------------------------------------------------------------- |
| select           | Opierać | Styled native select dropdown                                 |
| select-soft      | Styl    | Stonowane przyciemnione tło                                   |
| select-ghost     | Styl    | Brak widocznej granicy, dopóki nie zostanie ustawiona ostrość |
| select-dashed    | Styl    | Styl przerywanej granicy                                      |
| select-xs        | Rozmiar | Bardzo mały                                                   |
| select-sm        | Rozmiar | Mały                                                          |
| select-md        | Rozmiar | Średni (domyślny)                                             |
| select-lg        | Rozmiar | Duży                                                          |
| select-xl        | Rozmiar | Bardzo duży                                                   |
| select-2xl       | Rozmiar | 2× bardzo duże                                                |
| select-primary   | Kolor   | Obramowanie koloru podstawowego motywu                        |
| select-secondary | Kolor   | Ramka koloru motywu dodatkowego                               |
| select-accent    | Kolor   | Obramowanie koloru motywu akcentującego                       |
| select-neutral   | Kolor   | Neutralna granica koloru motywu                               |
| select-info      | Kolor   | Informacje semantyczne obramowanie koloru                     |
| select-success   | Kolor   | Sukces semantycznej granicy koloru                            |
| select-warning   | Kolor   | Ostrzeżenie semantyczna granica koloru                        |
| select-error     | Kolor   | Błąd semantycznego obramowania koloru                         |

## Podstawowe użycie

## Select Sizes

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

## Select Colors

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

## Select Styles

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

## Disabled Select

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

## Select with 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>
```