Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Wählen Sie Komponente aus

Zuletzt aktualisiert:

Nur CSS-CSS-Auswahl-Dropdown-Menü „Tailwind“ mit primären, sekundären, Akzent- und semantischen Farbvarianten. Größen xs-xl, Ghost-Stil. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Ausgewählte Komponenten bieten Benutzern eine Dropdown-Liste mit sich gegenseitig ausschließenden Optionen, sodass sie einen Wert aus einem vordefinierten Satz auswählen können. Mit nativen HTML-Auswahlelementen erstellt und mit Tailwind-CSS-Stil erweitert, unterstützen Auswahlen mehrere Größen, Farben und Zustände. Die zugänglichen und über die Tastatur navigierbaren Auswahl-Dropdown-Menüs eignen sich ideal für die Auswahl aus großen Optionslisten, Länderauswahl- und Einstellungsfeldern.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
selectBaseGestaltetes Drop-down-Menü zur nativen Auswahl
select-softStilGedämpfter getönter Hintergrund
select-ghostStilKein sichtbarer Rand bis zur Fokussierung
select-dashedStilGestrichelter Randstil
select-xsGrößeExtra klein
select-smGrößeKlein
select-mdGrößeMittel (Standard)
select-lgGrößeGroß
select-xlGrößeExtra groß
select-2xlGröße2× extra groß
select-primaryFarbeFarbrand des primären Themas
select-secondaryFarbeFarbrand des sekundären Themas
select-accentFarbeFarbumrandung des Akzentthemas
select-neutralFarbeNeutraler Themenfarbrand
select-infoFarbeInfo-semantischer Farbrand
select-successFarbeErfolgssemantischer Farbrand
select-warningFarbeWarnender semantischer Farbrand
select-errorFarbeFehler beim semantischen Farbrand

Grundlegende Verwendung

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>

Wählen Sie Größen aus

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>

Wählen Sie Farben aus

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>

Wählen Sie Stile aus

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>

Deaktiviert auswählen

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

Mit Beschriftung auswählen

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>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Wählen-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP