Widget

Form

Auto-emitted from DSKintsugiCatalog.form. Tier molecule.

Live Preview
Surface

Dark

Default · tide-wave context · carmine focus ring on navy-deep

Click any field to see the carmine focus ring (box-shadow 0 0 0 3px color-mix(in srgb, var(--carmine) 12%, transparent)). Submit inherits .ds-cta-primary — same carmine → gold hover recipe as the CTA atom.

Surface

Light (warm-pro)

Paper bg · cream card · border flips to line2 · carmine focus ring unchanged

On light: label color flips to var(--ink2), input bg becomes var(--paper), border becomes var(--line2). Focus ring stays carmine — same halo, different substrate.

Native · macOS
macOS SwiftUI render of Form
DSL usage
// Cross-target (KatagamiCore ViewNode)
FormDSL.contactForm(
    fields: [
        .text(id: "full_name",  label: "Nom complet",           placeholder: "Jean Dupont"),
        .email(id: "email",     label: "Email professionnel",    placeholder: "j.dupont@banque.be"),
        .text(id: "company",    label: "Entreprise",             placeholder: "Votre institution"),
        .select(id: "role",     label: "Rôle",                   options: FormDSL.sigmaRoleOptions),
        .textarea(id: "message", label: "Votre message",         placeholder: "Décrivez vos besoins…"),
    ],
    action: "/api/contact",
    submitLabel: "Envoyer la demande →",
    focusAccent: .carmine,
    surface: .dark
)

// Web emit — identical to tide-wave-v3.html #contactForm
<form class="contact-form" id="contactForm" action="/api/contact" method="POST">
  <div class="form-row">
    <div class="form-group">
      <label for="firstName">Prénom</label>
      <input type="text" id="firstName" name="firstName" required placeholder="Jean">
    </div>
    <div class="form-group">
      <label for="lastName">Nom</label>
      <input type="text" id="lastName" name="lastName" required placeholder="Dupont">
    </div>
  </div>
  <div class="form-group">
    <label for="email">Email professionnel</label>
    <input type="email" id="email" name="email" required placeholder="j.dupont@banque.be">
  </div>
  <div class="form-row">
    <div class="form-group">
      <label for="company">Entreprise</label>
      <input type="text" id="company" name="company" placeholder="Votre institution">
    </div>
    <div class="form-group">
      <label for="role">Rôle</label>
      <select id="role" name="role">
        <option value="">Votre rôle</option>
        <option value="direction">Direction</option>
        <option value="cto">CTO / IT</option>
        <option value="compliance">Compliance Officer</option>
        <option value="rm">Risk Manager</option>
        <option value="pm">Portfolio Manager</option>
        <option value="rb">Relationship Manager</option>
        <option value="other">Autre</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label for="message">Votre message</label>
    <textarea id="message" name="message"
      placeholder="Décrivez vos besoins et le nombre d'utilisateurs envisagé...">
    </textarea>
  </div>
  <button type="submit" class="form-submit ds-cta-btn ds-cta-primary">
    Envoyer la demande →
  </button>
</form>
Attributes
NameTypeDefaultDescription
fields [FormField] — Ordered list of field descriptors: .text / .email / .select / .textarea. Rendered in declaration order. The .select case carries an [Option] array.
action String "/api/contact" Form action URL (POST endpoint). Falls back to JS submit handler if omitted.
submitLabel String "Envoyer →" Label on the full-width .ds-cta-primary submit button.
focusAccent Color .carmine Focus ring halo color. Applied as box-shadow 0 0 0 3px color-mix(in srgb, <accent> 12%, transparent) + border-color: <accent>. Default: carmine (sigma red equivalent).
surface FormSurface .dark .dark → navy-deep bg, white-glass card. .light → paper bg, cream card. Both share the same carmine focus ring.
validation FormValidation .html5 .html5 uses native required / type validation; .custom wires KatagamiValidation interceptors for real-time error states.
Used in
sigma-analytics tide-wave sigma-analytics warm-pro obyw-one