Skip to main content
VelinStyle v1.3.0
⌂ Home
  1. Docs
  2. Forms
  3. Overview

Forms Overview 1.2.2

VelinStyle provides a cohesive set of form classes for styling inputs, labels, field groups, and more — all with consistent sizing, spacing, and dark-mode support out of the box. Deutsch: Formulare Überblick

Maturity: Form primitives (.velin-field, .velin-label, .velin-input) are stable in 1.2.0. Contrast and focus tokens are AAA-oriented by default — not an app-level certification.

When to use

When not

Field wrapper — .velin-field

Wrap a label and input together with .velin-field to get consistent vertical spacing and proper association between label and control.

<div class="velin-field">
  <label class="velin-label" for="email">Email address</label>
  <input type="email" class="velin-input" id="email" placeholder="you@example.com">
</div>
<div class="velin-field">
  <label class="velin-label" for="password">Password</label>
  <input type="password" class="velin-input" id="password" placeholder="••••••••">
</div>

Labels — .velin-label

Apply .velin-label to any <label> for consistent font weight, size, and spacing. Required fields can use .velin-label--required.

<label class="velin-label velin-label--required" for="name">Full name</label>
<input type="text" class="velin-input" id="name">

Inputs — .velin-input

The .velin-input class provides consistent styling for text-type inputs. Default controls meet a 44px minimum target. Density comes from layout spacing and container-style utilities — not separate --sm/--lg input modifiers.

<input type="email" class="velin-input" placeholder="you@example.com">

Help text

Add contextual help below a form control with .velin-field-help.

Must be 3-20 characters, letters and numbers only.
<div class="velin-field">
  <label class="velin-label" for="username">Username</label>
  <input type="text" class="velin-input" id="username">
  <small class="velin-field-help">Must be 3-20 characters.</small>
</div>

Complete form example

We will never share your email.
<form>
  <div class="velin-field">
    <label class="velin-label" for="name">Full name</label>
    <input type="text" class="velin-input" id="name">
  </div>
  <div class="velin-field">
    <label class="velin-label" for="email">Email</label>
    <input type="email" class="velin-input" id="email">
  </div>
  <div class="velin-field">
    <label class="velin-label" for="msg">Message</label>
    <textarea class="velin-input" id="msg" rows="3"></textarea>
  </div>
  <button type="submit" class="velin-btn velin-btn--primary">Submit</button>
</form>

CSS Variables

Form controls use CSS custom properties for easy theming:

:root {
  --velin-input-bg: #fff;
  --velin-input-color: #212529;
  --velin-input-border-color: #dee2e6;
  --velin-input-border-radius: 0.375rem;
  --velin-input-focus-border-color: #86b7fe;
  --velin-input-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
  --velin-input-padding-x: 0.75rem;
  --velin-input-padding-y: 0.375rem;
  --velin-label-font-weight: 500;
}

Accessibility