Skip to main content
VelinStyle v0.8.0
⌂ Home
  1. Docs
  2. Forms
  3. Overview

Forms Overview

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.

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. Use .velin-label--sm or .velin-label--lg for sizing.

<label class="velin-label velin-label--sm">Small label</label>
<label class="velin-label">Default label</label>
<label class="velin-label velin-label--lg">Large label</label>

Inputs — .velin-input

The .velin-input class provides consistent styling for text-type inputs. Use .velin-input--sm or .velin-input--lg for sizing.

<input type="text" class="velin-input velin-input--sm" placeholder="Small">
<input type="text" class="velin-input" placeholder="Default">
<input type="text" class="velin-input velin-input--lg" placeholder="Large">

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="btn 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;
}

Theme wählen