Forms

Form layouts and field patterns.

Basic Form

Spacing Rules

Element	Spacing
Label to Input	4px (space-1)
Field to Field	16px (space-4)
Last field to Buttons	24px (space-6)
Button to Button	12px (space-3)

Field Grid

Display read-only data in a grid layout.

<div class="sw-field-grid">
  <div class="sw-field">
    <span class="sw-field-label">Name</span>
    <span class="sw-field-value">John Doe</span>
  </div>
  ...
</div>

CSS

.sw-label {
  display: block;
  font-size: var(--sw-text-xs);
  font-weight: var(--sw-font-semibold);
  color: var(--sw-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--sw-space-1);
}

.sw-field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sw-space-4);
}

.sw-field {
  display: flex;
  flex-direction: column;
  gap: var(--sw-space-1);
}

.sw-field-label {
  font-size: var(--sw-text-xs);
  font-weight: var(--sw-font-semibold);
  color: var(--sw-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sw-field-value {
  font-size: var(--sw-text-md);
  font-weight: var(--sw-font-medium);
  color: var(--sw-text-primary);
}