Form Layout

Inline fields

Fields with labels on the same line as the input. For action rows (title + hint left, control right, bordered), see Action row — do not stretch af-field-inline into that layout.

Inline Field

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

Field 1

Field 2

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