1. Docs
2. Forms
3. Form Control

Form Control 1.2.2

Style text inputs and textareas with .velin-input. Supports sizing, disabled, readonly, and plaintext states. Deutsch: Formularsteuerung

When to use

• Text, email, password, search, and similar single-line fields — apply .velin-input.
• Multi-line text — prefer .velin-textarea (or .velin-input on a <textarea>).
• Mark known-bad fields with .velin-input--error and aria-invalid="true", or let form-summary do it on submit.

When not

• Do not use .velin-input for checkboxes, radios, or ranges — see Checks & Radios / Range.
• Do not hide the label; use .velin-sr-only only when a visible label truly cannot fit.
• Do not rely on --sm/--lg input size modifiers — they are not part of the 1.2.0 control API.

Text inputs

Apply .velin-input to any text-type <input> for consistent cross-browser styling.

<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

The .velin-input class also works on <textarea> elements.

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

Sizing & density

Controls default to a minimum block size of 2.75rem (44px) for touch and pointer targets. Adjust density with spacing utilities and layout — there are no .velin-input--sm / .velin-input--lg modifiers in 1.2.0.

<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>

Disabled

Add the disabled attribute to grey out the input and prevent interaction.

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

Readonly

The readonly attribute prevents editing but keeps normal styling. Add .velin-input--plaintext to strip borders and background.

<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>

File input

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

Color input

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

Accessibility

• Visible label + matching id/for; required fields can use .velin-label--required.
• Disabled controls are styled with reduced opacity — still announce state via the native disabled attribute.
• Errors: aria-invalid + .velin-field-error (or <velin-form-summary>).

Related

• Forms overview · Select · Input group
• Validation · Form summary
• Visually hidden for sr-only labels