Forms

vel-src: input.css

Form control components including text inputs, textarea, select, checkbox, radio, switch/toggle, and input groups with state variants.

Class	Properties
vel-input	Base text input — full width, bordered, surface background, focus ring
vel-input-sm	Smaller padding and font size
vel-input-lg	Larger padding and font size
vel-input-error	Red border and error focus ring
vel-input-success	Green border and success focus ring
vel-textarea	Multi-line text area with resize control
vel-select	Styled native select with custom arrow
vel-checkbox	Styled checkbox input
vel-radio	Styled radio input
vel-switch	Toggle switch — CSS-only pill with animated thumb
vel-form-group	Vertical stack wrapper for label + input + hint
vel-form-label	Label styling — small font, muted color, margin-bottom
vel-form-hint	Helper text below input — muted, smaller font
vel-form-error	Error message text — danger color
vel-input-group	Horizontal group that joins inputs and addons
vel-input-group-text	Non-interactive addon cell inside vel-input-group

Examples

Text input with label and hint

Email address We'll never share your email.

Username Username is already taken.

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;max-width:400px;">
  <div class="vel-form-group">
    <label class="vel-form-label">Email address</label>
    <input class="vel-input" type="email" placeholder="you@example.com" />
    <span class="vel-form-hint">We'll never share your email.</span>
  </div>
  <div class="vel-form-group">
    <label class="vel-form-label">Username</label>
    <input class="vel-input vel-input-error" type="text" placeholder="username" />
    <span class="vel-form-error">Username is already taken.</span>
  </div>
</div>

Checkbox and radio

Remember me Option A Option B

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;display:flex;gap:24px;align-items:center;flex-wrap:wrap;">
  <label style="display:flex;align-items:center;gap:8px;color:#e2e8f0;cursor:pointer;">
    <input class="vel-checkbox" type="checkbox" checked />
    Remember me
  </label>
  <label style="display:flex;align-items:center;gap:8px;color:#e2e8f0;cursor:pointer;">
    <input class="vel-radio" type="radio" name="demo" checked />
    Option A
  </label>
  <label style="display:flex;align-items:center;gap:8px;color:#e2e8f0;cursor:pointer;">
    <input class="vel-radio" type="radio" name="demo" />
    Option B
  </label>
</div>

Switch / Toggle

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;display:flex;gap:16px;align-items:center;">
  <label class="vel-switch">
    <input type="checkbox" />
    <span></span>
  </label>
  <label class="vel-switch">
    <input type="checkbox" checked />
    <span></span>
  </label>
</div>

Input group with prefix

https://

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;max-width:400px;">
  <div class="vel-input-group">
    <span class="vel-input-group-text">https://</span>
    <input class="vel-input" type="text" placeholder="yourdomain.com" />
  </div>
</div>