Select

the Select-element bietet Dropdown-Selects for Forme and ermoglicht Benutzern, a Option aus einer vordefinierten list auszuwahlen. it ist a wichtiges element for Forme and Benutzereinstellungen.

Installation

the Select-element ist Teil the Casoon UI Library.

# Installation the gesamten Bibliothek
npm install @casoon/ui-lib

Import

/* Import aller UI-elements */
@import '@casoon/ui-lib/ui.css';

/* or only the Select-component */
@import '@casoon/ui-lib/components/select.css';

Basic Usage

<select class="select">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Option 1Option 2Option 3

Variants

Sizesvarianten

it gibt drei Sizesvarianten for the Select-element: small, mittel (Standard) and gross.

<select class="select sm">
  <option>small</option>
</select>

<select class="select">
  <option>Mittel (Standard)</option>
</select>

<select class="select lg">
  <option>Gross</option>
</select>

small

Mittel (Standard)

Gross

Zustandsvarianten

Deaktiviert

<select class="select" disabled>
  <option>Deaktiviert</option>
</select>

Deaktiviert

with errors

<select class="select error">
  <option>with errors</option>
</select>

with errors

with success

<select class="select success">
  <option>Erfolgreich</option>
</select>

Erfolgreich

with Label (over Form-component)

<div class="form-group">
  <label class="form-label" for="country">Land</label>
  <select class="select" id="country">
    <option>Deutschland</option>
    <option>Osterreich</option>
    <option>Schweiz</option>
  </select>
</div>

LandDeutschlandOsterreichSchweiz

Mehrfachauswahl

<select class="select" multiple>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Option 1Option 2Option 3

with Optionsgruppen

<select class="select">
  <optgroup label="Gruppe 1">
    <option>Option 1.1</option>
    <option>Option 1.2</option>
  </optgroup>
  <optgroup label="Gruppe 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
</select>

Option 1.1Option 1.2Option 2.1Option 2.2

Anpassung

the Select-element kann over CSS Variables angepasst become:

:root {
  --color-white: #ffffff;        /* Hintergrundfarbe */
  --color-gray-100: #f3f4f6;     /* Deaktivierter background */
  --color-gray-300: #d1d5db;     /* Rahmenfarbe */
  --color-gray-500: #6b7280;     /* Deaktivierte Textfarbe */
  --color-gray-700: #374151;     /* Optgroup Textfarbe */
  --color-gray-900: #111827;     /* Textfarbe */
  --color-primary: #3b82f6;      /* Fokus-border & Hervorhebung */
  --color-error: #ef4444;        /* errors-Zustandsfarbe */
  --color-success: #10b981;      /* Erfolgs-Zustandsfarbe */
  --font-size-sm: 0.875rem;      /* Kleine Textgrosse */
  --font-size-base: 1rem;        /* Standard-Textgrosse */
  --font-size-lg: 1.125rem;      /* size Textgrosse */
  --font-weight-medium: 500;     /* Optgroup Schriftgewicht */
  --radius-sm: 0.125rem;         /* Mehrfachauswahl-Optionen Radius */
  --radius-md: 0.375rem;         /* Select-Rahmenradius */
  --space-1: 0.25rem;            /* Kleinster spacing */
  --space-2: 0.5rem;             /* smaller spacing */
  --space-3: 0.75rem;            /* Mittlerer spacing */
  --space-4: 1rem;               /* Grosser spacing */
  --transition-fast: 0.15s ease; /* Ubergangsgeschwindigkeit */
}

Accessibility

for a bessere Accessibility Please note please folgende Punkte:

• use them immer a sichtbares Label (with einem <label>-element), the with dem Select-element verknupft ist
• Stellen them einen ausreichenden Farbkontrast for Text and border sicher
• Bieten them klare Anweisungen for Mehrfachauswahl-inputs
• use them Optionsgruppen, um verwandte Optionen in langen lists to organisieren
• Fugen them at Bedarf a Standard- or Platzhalter-Option hinzu
• Stellen them sicher, that the component with the Tastatur bedienbar ist

Bewahrte Praktiken

• use them Select-elements, um a (or several) Optionen aus einer list auszuwahlen
• Bieten them aussagekraftige Option-Texte on, the the selection eindeutig beschreiben
• Strukturieren them length lists with Optionsgruppen for bessere Overviewlichkeit
• use them angemessene Sizes basierend on dem Kontext and the importance des Elements
• Berucksichtigen them the mobile Nutzung at the Gestaltung Ihrer Select-elements

Browser-Kompatibilitat

the Select-element ist with allen modernen Browsern kompatibel.

function	Chrome	Firefox	Safari	Edge
Grundlegende Funktionalitat	✅	✅	✅	✅
Anpassung des Erscheinungsbildes	✅	✅	✅	✅
Mehrfachauswahl	✅	✅	✅	✅
Optionsgruppen	✅	✅	✅	✅
CSS Variables	49+	31+	9.1+	15+