Form Layout — Syhrezz Design System

Composition

/* Form in modal (most common) */
.modal-body
  .form-group × N          // each field wrapped in form-group
    .form-label             // UPPERCASE 12px fw-700 #64748B letter-spacing:.5px
    .input                  // input / select / textarea
    .form-error-msg         // shown on validation error
    .form-hint              // optional helper text below field
  .input-alert              // warning note (red bg, used for password notes etc)
.modal-footer
  .btn.btn-outline          // Cancel — always LEFT
  .btn.btn-primary          // Submit — always RIGHT

Preview

Add New User

Full Name *

Email Address *

Role

Region

Notes

Note: A temporary password will be auto-generated and sent to the user's email address.

Rules

Rule	Detail
Field order	Required fields first. Group related fields together. Optional fields last.
Required indicator	Red asterisk `<span style="color:#F05252">*</span>` after label text for required fields.
Two-column layout	Use `display:grid; grid-template-columns:1fr 1fr; gap:12px` for paired fields (role + region, first + last name).
Form width	Max-width 500px (modal default). Never wider than 680px (modal-lg).
Submit button	Always right-aligned in footer. Use `type="submit"` inside a form element.
Cancel button	Always left of submit. Uses `.btn-outline`. Closes modal without saving.
Alert/note	Use `.input-alert` (red bg, #FEEEF2 border #FCA5A5) for important warnings above the footer.

AI Implementation Notes

For AI coding assistants: Every form field must be wrapped in .form-group. Labels are ALWAYS uppercase 12px fw-700 with letter-spacing:0.5px — use class .form-label. All fields (input, select, textarea) use class .input. Validation errors add .input-error to the field AND render a .form-error-msg div below it. Cancel is always left, Submit is always right in the footer. Two-column field pairs use CSS Grid, not Flexbox.