1. Docs
2. Formulare
3. Formularsteuerung

Formularsteuerung 1.2.0

Gestalte Texteingaben und Textareas mit .velin-input. Unterstützt Größen, deaktivierte, schreibgeschützte und Plaintext-Zustände. English: Form Control

Wann verwenden

• Text-, E-Mail-, Passwort-, Such- und ähnliche einzeilige Felder - wende .velin-input an.
• Mehrzeiliger Text - bevorzuge .velin-textarea (oder .velin-input auf einem <textarea>).
• Markiere bekannte fehlerhafte Felder mit .velin-input--error und aria-invalid="true" oder lasse form-summary dies beim Absenden erledigen.

Wann nicht

• Do not use .velin-input for checkboxes, radios, or ranges — see Checkboxen & Radios / Schieberegler.
• Verstecke das Label nicht; nutze .velin-sr-only nur, wenn ein sichtbares Label wirklich keinen Platz findet.
• Verlasse dich nicht auf --sm/--lg-Input-Größenmodifier - sie sind nicht Teil der Control-API von 1.2.0.

Texteingaben

Wende .velin-input auf jedes Text-<input> an, um browserübergreifend konsistentes Styling zu erhalten.

<input type="text" class="velin-input" placeholder="Enter text">
<input type="email" class="velin-input" placeholder="name@example.com">
<input type="password" class="velin-input" placeholder="Password">

Textarea

Die Klasse .velin-input funktioniert auch auf <textarea>-Elementen.

<textarea class="velin-input" rows="4" placeholder="Write something..."></textarea>

Größen & density

Controls haben standardmäßig eine Mindest-Blockgröße von 2.75rem (44px) für Touch- und Pointer-Ziele. Passe die Dichte mit Spacing-Utilities und Layout an - in 1.2.0 gibt es keine .velin-input--sm / .velin-input--lg-Modifier.

<div class="velin-field">
  <label class="velin-label" for="name">Default density</label>
  <input type="text" class="velin-input" id="name" placeholder="Min 44px target">
</div>

Deaktiviert

Füge das Attribut disabled hinzu, um die Eingabe auszugrauen und Interaktion zu verhindern.

<input type="text" class="velin-input" placeholder="Disabled input" disabled>
<textarea class="velin-input" placeholder="Disabled textarea" disabled></textarea>

Schreibgeschützt

Das Attribut readonly verhindert Bearbeitung, behält aber das normale Styling bei. Füge .velin-input--plaintext hinzu, um Rahmen und Hintergrund zu entfernen.

<input type="text" class="velin-input" value="Cannot edit this" readonly>
<input type="text" class="velin-input velin-input--plaintext" value="email@example.com" readonly>

Datei-Eingabe

<input type="file" class="velin-input">
<input type="file" class="velin-input" multiple>

Farbeingabe

<input type="color" class="velin-input velin-input--color" value="#0d6efd">

Barrierefreiheit

• Sichtbares Label + passendes id/for; Pflichtfelder können .velin-label--required verwenden.
• Deaktiviert controls are styled with reduced opacity — still announce state via the native disabled attribute.
• Fehler: aria-invalid + .velin-field-error (oder <velin-form-summary>).

Verwandt

• Formulare Überblick · Auswahl · Eingabegruppe
• Validierung · Form Summary
• Visually hidden für sr-only-Labels