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

# Select Component

Les composants sélectionnés fournissent aux utilisateurs une liste déroulante d'options mutuellement exclusives, leur permettant de choisir une valeur dans un ensemble prédéfini. Construit avec des éléments de sélection HTML natifs et amélioré avec le style CSS Tailwind, les sélections prennent en charge plusieurs tailles, couleurs et états. Accessibles et navigables au clavier, les listes déroulantes de sélection sont idéales pour choisir parmi de grandes listes d'options, une sélection de pays et des panneaux de préférences.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

| Classe           | Taper   | Description                                     |
| ---------------- | ------- | ----------------------------------------------- |
| select           | Base    | Liste déroulante de sélection native stylisée   |
| select-soft      | Style   | Fond teinté en sourdine                         |
| select-ghost     | Style   | Aucune bordure visible jusqu'à la mise au point |
| select-dashed    | Style   | Style de bordure en pointillés                  |
| select-xs        | Taille  | Très petit                                      |
| select-sm        | Taille  | Petit                                           |
| select-md        | Taille  | Moyen (par défaut)                              |
| select-lg        | Taille  | Grand                                           |
| select-xl        | Taille  | Très grand                                      |
| select-2xl       | Taille  | 2× très grand                                   |
| select-primary   | Couleur | Bordure de couleur du thème principal           |
| select-secondary | Couleur | Bordure de couleur du thème secondaire          |
| select-accent    | Couleur | Bordure de couleur du thème d'accentuation      |
| select-neutral   | Couleur | Bordure de couleur thème neutre                 |
| select-info      | Couleur | Bordure de couleur sémantique d'information     |
| select-success   | Couleur | Bordure de couleur sémantique du succès         |
| select-warning   | Couleur | Bordure de couleur sémantique d'avertissement   |
| select-error     | Couleur | Bordure de couleur sémantique d'erreur          |

## Utilisation de base

## Sélectionnez les tailles

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

## Sélectionnez les couleurs

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

## Sélectionnez des 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>
```

## Désactivé Sélectionner

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

## Sélectionner avec l'étiquette

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