Passer au contenu principal
Frutjam logo Frutjam
v2.2.2
Theme

Select Component

CSS-only Tailwind CSS select dropdown with primary, secondary, accent, and semantic color variants. Sizes xs–xl, ghost style. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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
selectBaseListe déroulante de sélection native stylisée
select-softStyleFond teinté en sourdine
select-ghostStyleAucune bordure visible jusqu'à la mise au point
select-dashedStyleStyle de bordure en pointillés
select-xsTailleTrès petit
select-smTaillePetit
select-mdTailleMoyen (par défaut)
select-lgTailleGrand
select-xlTailleTrès grand
select-2xlTaille2× très grand
select-primaryCouleurBordure de couleur du thème principal
select-secondaryCouleurBordure de couleur du thème secondaire
select-accentCouleurBordure de couleur du thème d'accentuation
select-neutralCouleurBordure de couleur thème neutre
select-infoCouleurBordure de couleur sémantique d'information
select-successCouleurBordure de couleur sémantique du succès
select-warningCouleurBordure de couleur sémantique d'avertissement
select-errorCouleurBordure de couleur sémantique d'erreur

Utilisation de base

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>

Sélectionnez les tailles

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>

Sélectionnez les couleurs

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>

Sélectionnez des styles

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>

Désactivé Sélectionner

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

Sélectionner avec l'étiquette

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>