Form

Complete set: input / textarea / select / checkbox / radio / switch / file. Smart validation via :user-invalid (with legacy fallback).

Full form

<form class="form">
  <div class="form__group">
    <label class="required">Required</label>
    <input type="text" required>
  </div>
  <label class="form__switch"><input type="checkbox"> Label</label>
  <div class="form__actions"><button class="btn">OK</button></div>
</form>

Input group (addons)

$ USD

<div class="form__input-group">
  <span class="form__input-addon">$</span>
  <input type="number">
  <span class="form__input-addon">USD</span>
</div>

Modifiers

Class	Effect
`.form`	Grid layout with gap.
`.form__group`	Field wrapper (label + input + hint).
`.form__row`	Multiple fields side-by-side.
`.form__checkbox / .form__radio / .form__switch`	Styled control wrappers.
`.form__input-group / .form__input-addon`	Prefix/suffix addons.
`.form__file / .form__file--compact`	Styled file input.
`.form__range`	Styled range slider.
`.form__hint / .form__error`	Help / error message slots.
`.form__actions`	Button row at the bottom.
`label.required`	Appends a red asterisk.
`[aria-invalid="true"]`	Forces the error border regardless of interaction state.