FR | EN
Installer
Documentation

Documentation - Formulaire.

Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.

Démarrage

Concepts de base

Utilitaires

Composants

Formulaire

Marssel propose un ensemble complet de classes utilitaires pour styliser vos formulaires, gérer les états de validation, et créer des interfaces utilisateur cohérentes et accessibles.

Inputs de base

Stylez vos champs de formulaire avec les classes standards :

Aperçu 
<input type="text" class="w-[100%] p-[12px] border-[1px_solid_e0e0e0] rounded-[4px]">

<textarea class="w-[100%] p-[12px] border-[1px_solid_e0e0e0] rounded-[4px]+min-h-[120px]"></textarea>

<select class="w-[100%] p-[12px] border-[1px_solid_e0e0e0] rounded-[4px]">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

États de focus

Ajoutez des styles au focus pour améliorer l'expérience utilisateur. Vous pouvez utiliser la syntaxe compacte ou standard.

Aperçu 
<input class="input---[w-[100%]+p-[12px]+border-[1px_solid_e0e0e0]+outline-[none]] border-[1px_solid_2563eb]:focus">

Validation

Stylez les états de validation avec les pseudo-classes :valid et :invalid.

Aperçu
Veuillez entrer une adresse email valide. 
<input type="email"
    class="w-[100%] p-[12px] border-[1px_solid_e0e0e0] rounded-[4px] border-[1px_solid_10b981]:valid"
    required>

<input type="email"
    class="w-[100%] p-[12px] border-[1px_solid_e0e0e0] rounded-[4px] border-[1px_solid_D41212]:invalid"
    required>

Champs désactivés

Gérez l'apparence des champs désactivés avec le modificateur :disabled.

Aperçu 
<input class="w-[100%] p-[12px] border-[1px_solid_e0e0e0] rounded-[4px] bg-[f5f5f5]:disabled c-[999999]:disabled cursor-[not-allowed]:disabled"
        disabled>

Checkbox et Radio

Exemple de mise en page pour les groupes de sélection.

Aperçu
Préférences
Méthode de paiement 
<div class="col-[12]">
    <div class="col-[row] gap-[24px]">
        <div class="col-[12]">
            <fieldset class="p-[16px] border-[1px_solid_e2e2e2] rounded-[4px]">
                <legend class="font-weight-[500] c-[444] px-[8px]">Préférences</legend>

                <label class="d-[flex] align-items-[center] gap-[8px] mb-[12px] cursor-[pointer]">
                    <input type="checkbox" class="w-[16px] h-[16px] cursor-[pointer]">
                    <span>Newsletter</span>
                </label>

                <label class="d-[flex] align-items-[center] gap-[8px] cursor-[pointer]">
                    <input type="checkbox" class="w-[16px] h-[16px] cursor-[pointer]">
                    <span>Notifications</span>
                </label>
            </fieldset>
        </div>

        <div class="col-[12]">
            <fieldset class="p-[16px] border-[1px_solid_e2e2e2] rounded-[4px]">
                <legend class="font-weight-[500] c-[444] px-[8px]">Méthode de paiement</legend>

                <label class="d-[flex] align-items-[center] gap-[8px] mb-[12px] cursor-[pointer]">
                    <input type="radio" name="payment" class="w-[16px] h-[16px] cursor-[pointer]">
                    <span>Carte de crédit</span>
                </label>

                <label class="d-[flex] align-items-[center] gap-[8px] cursor-[pointer]">
                    <input type="radio" name="payment" class="w-[16px] h-[16px] cursor-[pointer]">
                    <span>PayPal</span>
                </label>
            </fieldset>
        </div>
    </div>
</div>

Input avec icônes

Ajoutez des icônes à gauche ou à droite de vos inputs en utilisant un conteneur flexible.

Aperçu 
<div class="mb-[20px]">
    <label class="d-[block] mb-[8px] font-weight-[600]">Email</label>
    <div class="d-[flex] items-[center] border-[1px_solid_e0e0e0] rounded-[4px] px-[12px] border-color-[2563eb]:focus-within transition-[border-color_0.2s]">
        <span class="icon-[envelope] icon-size-[20px] c-[5C6F8A]"></span>
        <input type="email"
            class="flex-[1] p-[12px] border-[none] outline-[none] bg-[transparent]"
            placeholder="votre@email.com">
    </div>
</div>

<div class="mb-[20px]">
    <label class="d-[block] mb-[8px] font-weight-[600]">Mot de passe</label>
    <div class="d-[flex] items-[center] border-[1px_solid_e0e0e0] rounded-[4px] px-[12px] border-color-[2563eb]:focus-within">
        <input type="password"
            class="flex-[1] p-[12px] border-[none] outline-[none] bg-[transparent]"
            placeholder="Votre mot de passe">
        <span class="icon-[eye] icon-size-[20px] c-[5C6F8A] cursor-[pointer] c-[2563eb]:hover transition-[color_0.2s]"></span>
    </div>
</div>

Champs empilés (Layout vertical)

Organisation verticale des champs avec gestion des erreurs.

Aperçu
Exemple : Jean Dupont
Format d'email incorrect 
<form class="col-[row] gap-[24px]">
    <div class="col-[12]">
        <div class="d-[flex] flex-direction-[column] gap-[8px] mb-[24px]">
            <label class="font-weight-[500] c-[444]">Nom complet</label>
            <input type="text"
                class="w-[100%] p-[12px] border-[1px_solid_e2e2e2] rounded-[4px] bg-[transparent] outline-[none] border-[007bff]:focus shadow-[0_0_0_3px_rgba(0,123,255,0.25)]:focus transition-[all_0.2s]">
            <small class="c-[666] font-size-[12px]">Exemple : Jean Dupont</small>
        </div>

        <div class="d-[flex] flex-direction-[column] gap-[8px] mb-[24px]">
            <label class="font-weight-[500] c-[dc3545]">Email invalide</label>
            <input type="email"
                class="w-[100%] p-[12px] border-[1px_solid_dc3545] rounded-[4px] outline-[none] c-[dc3545]"
                value="email.invalide">
            <small class="c-[dc3545] font-size-[12px]">Format d'email incorrect</small>
        </div>
    </div>
</form>

Champs alignés (Layout horizontal)

Utilisation du système de grille pour aligner les champs sur les écrans plus larges.

Aperçu 
<form class="col-[row] gap-[24px]">
    <div class="col-[12]">
        <div class="col-[row] md--gutter-x-[20px] gap-y-[16px]">
            <div class="col-[12] md--col-[6]">
                <div class="d-[flex] flex-direction-[column] md--flex-direction-[row] md--align-items-[center] gap-[8px] md--gap-[16px]">
                    <label class="font-weight-[500] c-[444] min-w-[80px]">Téléphone</label>
                    <div class="flex-[1]">
                        <input type="tel" class="w-[100%] p-[12px] border-[1px_solid_e2e2e2] rounded-[4px]">
                    </div>
                </div>
            </div>

            <div class="col-[12] md--col-[6]">
                <div class="d-[flex] flex-direction-[column] md--flex-direction-[row] md--align-items-[center] gap-[8px] md--gap-[16px]">
                    <label class="font-weight-[500] c-[444] min-w-[80px]">Email</label>
                    <div class="flex-[1]">
                        <input type="email" class="w-[100%] p-[12px] border-[1px_solid_e2e2e2] rounded-[4px]">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-[12]">
        <div class="col-[row] md--gutter-x-[20px] gap-y-[16px]">
            <div class="col-[12] md--col-[6]">
                <div class="d-[flex] flex-direction-[column] md--flex-direction-[row] md--align-items-[center] gap-[8px] md--gap-[16px]">
                    <label class="font-weight-[500] c-[444] min-w-[80px]">Pays</label>
                    <select class="flex-[1] w-[100%] p-[12px] border-[1px_solid_e2e2e2] rounded-[4px] bg-[white]">
                        <option>France</option>
                        <option>Belgique</option>
                    </select>
                </div>
            </div>

            <div class="col-[12] md--col-[6]">
                <div class="d-[flex] flex-direction-[column] md--flex-direction-[row] md--align-items-[center] gap-[8px] md--gap-[16px]">
                    <label class="font-weight-[500] c-[444] min-w-[80px]">Ville</label>
                    <select class="flex-[1] w-[100%] p-[12px] border-[1px_solid_e2e2e2] rounded-[4px] bg-[white]">
                        <option>Paris</option>
                        <option>Bruxelles</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</form>

Groupe avec bouton

Input avec bouton d'action intégré.

Aperçu 
<div class="mb-[24px]">
    <label class="d-[block] mb-[8px] font-weight-[500] c-[444]">Code promo</label>
    <div class="d-[flex] gap-[8px]">
        <input type="text"
            class="flex-[1] p-[12px] border-[1px_solid_e2e2e2] rounded-[4px]"
            placeholder="Entrez votre code">
        <button type="button"
            class="bg-[007bff] c-[white] px-[20px] py-[12px] rounded-[4px] border-[none] bg-[0069d9]:hover cursor-[pointer] transition-[background_0.2s]">
            Appliquer
        </button>
    </div>
</div>

Formulaire complet (Exemple)

Un formulaire de contact complet combinant différents types de champs et états.

Aperçu

Contactez-nous

Cliquez pour choisir une couleur 
<form class="w-[100%] mx-[auto] p-[24px] border-[1px_solid_f0f0f0] rounded-[8px] shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)]">
    <h3 class="mb-[24px] c-[333]">Contactez-nous</h3>

    <div class="mb-[20px]">
        <label class="d-[block] mb-[8px] font-weight-[600] c-[333333]">Nom complet</label>
        <input type="text"
            class="w-[100%] p-[12px] border-[1px_solid_e0e0e0] rounded-[4px] outline-[none] border-[2563eb]:focus transition-[border-color_0.2s]"
            required>
    </div>

    <div class="mb-[20px]">
        <label class="d-[block] mb-[8px] font-weight-[600] c-[333333]">Email</label>
        <input type="email"
            class="w-[100%] p-[12px] border-[1px_solid_e0e0e0] rounded-[4px] outline-[none] border-[D41212]:invalid border-[2563eb]:focus"
            required>
    </div>

    <div class="mb-[20px]">
        <label class="d-[block] mb-[8px] font-weight-[600] c-[333333]">Message</label>
        <textarea class="w-[100%] p-[12px] border-[1px_solid_e0e0e0] rounded-[4px] outline-[none] border-[2563eb]:focus min-h-[100px]"
            required></textarea>
    </div>

    <div class="form-group mb-[24px]">
        <label class="font-weight-[500] c-[444]">Couleur préférée</label>
        <div class="color-picker---d-[flex] align-items-[center] gap-[12px]">
            <input type="color" class="w-[50px] h-[50px] border-[2px_solid_e2e2e2] rounded-[8px] overflow-[hidden] cursor-[pointer]">
        </div>
        <small class="helper-text">Cliquez pour choisir une couleur</small>
    </div>

    <div class="mb-[24px]">
        <label class="d-[flex] items-[center] gap-[8px] cursor-[pointer]">
            <input type="checkbox" class="w-[18px] h-[18px] cursor-[pointer]">
            <span class="c-[333333] font-size-[14px]">J'accepte les conditions d'utilisation</span>
        </label>
    </div>

    <button type="submit"
            class="w-[100%] p-[12px_24px] bg-[2563eb] c-[ffffff] border-[none] rounded-[4px] cursor-[pointer] bg-[1d4ed8]:hover transform-[scale(1.02)]:active transition-[all_0.2s]">
        Envoyer le message
    </button>
</form>
← Précédent Boutons
Suivant → Cards

Réglages des cookies

Choisissez les données que vous souhaitez partager.

🙏 Les analytics nous aident à prioriser les bonnes fonctionnalités — données en Suisse, jamais revendues.

Essentiels Requis

Nécessaires au fonctionnement (session, sécurité).