Formulaires
Composants de saisie pour collecter proprement les données usagers, inspirés de l'esthétique minimaliste de shadcn/ui et de la robustesse de GOV.UK.
1. Champs de saisie & Sélecteurs
Champs standards agrémentés de textes d'aide explicatifs sous le champ.
Saisissez votre nom tel qu'il figure sur votre acte de naissance.
<!-- Simple input with helper text -->
<div class="ml-form-group">
<label class="ml-label" for="name">Nom complet</label>
<input type="text" class="ml-input" id="name" placeholder="Ex...">
<span class="ml-form-helper">Texte d'aide explicatif...</span>
</div>
<div class="ml-form-group">
<label class="ml-label" for="select">Démarche requise</label>
<select class="ml-select" id="select">
<option>Sélectionner</option>
</select>
</div>2. Sélection & Commutateurs
Composants interactifs stylisés pour les choix multiples ou binaires.
Cases à cocher (.ml-checkbox)
Boutons radio (.ml-radio)
Commutateur (.ml-switch)
<!-- Custom checkbox -->
<label class="ml-checkbox-container">
<input type="checkbox" class="ml-checkbox" checked>
J'accepte les conditions
</label>
<label class="ml-radio-container">
<input type="radio" name="options" class="ml-radio" checked>
Option A
</label>
<label class="ml-switch-container">
<input type="checkbox" class="ml-switch">
Activer les notifications SMS
</label>3. États Désactivé (Disabled) & Lecture seule (Read-Only)
Champs bloqués ou affichés à titre informatif.
<input type="text" class="ml-input" value="Donnée" disabled>
<input type="text" class="ml-input" value="Donnée" readonly>4. Groupes d'éléments (Input Groups)
Pour accoler des unités ou des boutons d'action directement aux champs.
FCFA
🔍
<!-- Input group with suffix -->
<div class="ml-input-group">
<input type="number" class="ml-input" placeholder="Montant">
<span class="ml-input-group-addon">FCFA</span>
</div>
<!-- Input group with prefix and action button -->
<div class="ml-input-group">
<span class="ml-input-group-addon">🔍</span>
<input type="text" class="ml-input" placeholder="Rechercher...">
<button class="ml-btn ml-btn-primary">Rechercher</button>
</div>5. États de validation (Succès / Erreur)
Retours colorés et messages explicatifs pour guider l'utilisateur.
<!-- Error state -->
<div class="ml-form-group">
<label class="ml-label" for="nina">Numéro NINA</label>
<input type="text" class="ml-input ml-input-error" id="nina">
<span class="ml-error-message">⚠️ Message d'erreur...</span>
</div>6. Zone de téléversement (Drag & Drop Upload)
Composant premium pour envoyer des justificatifs ou des pièces jointes.
Glissez-déposez vos fichiers ici
Formats acceptés : PDF, PNG, JPG (Max. 5 Mo)
<div class="ml-upload">
<input type="file" id="my-file">
<div class="ml-upload-icon">📤</div>
<div class="ml-upload-text">Glissez-déposez vos fichiers ici</div>
<div class="ml-upload-desc">PDF, PNG, JPG jusqu'à 5 Mo</div>
</div>7. Commandes segmentées (Segmented Control)
Composant de sélection exclusive à plusieurs options (boutons radio visuels), idéal pour changer de mode de vue (ex. Édition / Aperçu) ou filtrer des sous-ensembles de données.
Mode clair (.ml-segmented-control)
Mode sombre / Barres d'outils (.ml-segmented-control-dark)
<!-- Standard Light Mode -->
<div class="ml-segmented-control" role="radiogroup" aria-label="Filtre">
<button type="button" class="ml-segment-btn active" role="radio" aria-checked="true">Tous</button>
<button type="button" class="ml-segment-btn" role="radio" aria-checked="false">En cours</button>
</div>
<!-- Dark / Toolbar Mode -->
<div class="ml-segmented-control ml-segmented-control-dark" role="radiogroup" aria-label="Mode">
<button type="button" class="ml-segment-btn active" role="radio" aria-checked="true">
<i class="ml-icon-edit-line ml-icon--xs"></i>
<span>Édition</span>
</button>
<button type="button" class="ml-segment-btn" role="radio" aria-checked="false">
<i class="ml-icon-eye-line ml-icon--xs"></i>
<span>Aperçu</span>
</button>
</div>