Form Layout

Inline fields

Fields with labels on the same line as the input.

<div class="af-field-inline">
  <label class="af-field__label" for="inline-field">
    Inline Field
  </label>
  <div class="af-field__control">
    <input type="text" id="inline-field" class="af-input" />
  </div>
</div>

Fieldset

Group related fields together.

<fieldset>
  <legend>
    Fieldset Example
  </legend>
  <div class="af-field">
    <label class="af-field__label" for="fieldset-field-1">
      Field 1
    </label>
    <input type="text" id="fieldset-field-1" class="af-input" />
  </div>
  <div class="af-field">
    <label class="af-field__label" for="fieldset-field-2">
      Field 2
    </label>
    <input type="text" id="fieldset-field-2" class="af-input" />
  </div>
</fieldset>

Live example

Inline Field

Fieldset Example

Field 1

Field 2