Classless Form

For a classless approach, wrap your form in form.af-form. This enables automatic styling for additional form elements. Checkboxes and radios use a wrapping <label> (and a <fieldset> for a radio group) — no af-checkbox or af-radio class.

Markup

<form class="af-form">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" />

  <label for="country">Country</label>
  <select id="country" name="country">
    <option>Choose...</option>
  </select>

  <fieldset>
    <legend>Preferred contact</legend>
    <div class="af-stack af-gap-sm">
      <label>
        <input type="radio" name="contact" value="email" checked />
        <span>Email</span>
      </label>
      <label>
        <input type="radio" name="contact" value="phone" />
        <span>Phone</span>
      </label>
    </div>
  </fieldset>

  <label>
    <input type="checkbox" name="subscribe" />
    <span>Subscribe to the newsletter</span>
  </label>

  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>

  <button class="af-btn" type="submit">Submit</button>
</form>

What works without classes

Inside form.af-form, these elements work without classes:

input[type="text"], input[type="email"], input[type="password"], etc.
textarea
input[type="checkbox"]
input[type="radio"]
input[type="range"]
input[type="file"]

Wrap checkboxes and radios in a <label> so the control and text sit on one row. Group radios with <fieldset> and <legend>, then stack or inline the labels (af-stack / af-inline).

Note: label and input[type="checkbox"][role="switch"] already work without form.af-form (they have default styling). select requires either .af-form wrapper or .af-select class.