Démarrage rapide

Ce guide vous permet de construire un formulaire de connexion fonctionnel avec TDS en 5 minutes.

Prérequis

@tds-tchad/core installé (voir Installation)
Un projet web (HTML, React, Vue ou autre)

Charger les tokens CSS

Ajoutez les imports CSS en tête de votre feuille de style principale.

@import "@tds-tchad/core/tokens/color.css";
@import "@tds-tchad/core/tokens/typography.css";
@import "@tds-tchad/core/tokens/spacing.css";
@import "@tds-tchad/core/tokens/radius.css";
@import "@tds-tchad/core/tokens/shadow.css";
@import "@tds-tchad/core/tokens/motion.css";

@import "@tds-tchad/core/components/button/button.css";
@import "@tds-tchad/core/components/input/input.css";

/* Polices institutionnelles */
body {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: var(--tds-font-size-md);
  line-height: var(--tds-line-height-md);
  color: var(--tds-color-neutral-900);
  background-color: var(--tds-color-neutral-0);
}

Créer votre première page

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Connexion — Service en ligne</title>
  <link rel="stylesheet" href="/styles/global.css">
</head>
<body>
  <main style="
    max-width: 480px;
    margin: var(--tds-spacing-16) auto;
    padding: 0 var(--tds-spacing-4);
  ">
    <h1 style="
      font-size: var(--tds-font-size-4xl);
      font-weight: var(--tds-font-weight-semibold);
      margin-bottom: var(--tds-spacing-8);
    ">Connexion</h1>

    <form method="post" action="/login" novalidate>

      <!-- Champ email -->
      <div class="tds-field" style="margin-bottom: var(--tds-spacing-5);">
        <label class="tds-field__label" for="email">
          Adresse e-mail
        </label>
        <input
          id="email"
          name="email"
          type="email"
          class="tds-input tds-input--md"
          autocomplete="email"
          required
          placeholder="votre@email.td"
          aria-describedby="email-hint"
        >
        <p id="email-hint" class="tds-helper-text">
          Utilisez l'adresse e-mail liée à votre compte.
        </p>
      </div>

      <!-- Champ mot de passe -->
      <div class="tds-field" style="margin-bottom: var(--tds-spacing-6);">
        <label class="tds-field__label" for="password">
          Mot de passe
        </label>
        <input
          id="password"
          name="password"
          type="password"
          class="tds-input tds-input--md"
          autocomplete="current-password"
          required
        >
      </div>

      <!-- Bouton de soumission -->
      <button type="submit" class="tds-button tds-button--primary tds-button--md">
        Se connecter
      </button>

    </form>
  </main>
</body>
</html>

import '@tds-tchad/core/tokens/color.css';
import '@tds-tchad/core/tokens/typography.css';
import '@tds-tchad/core/tokens/spacing.css';
import '@tds-tchad/core/tokens/radius.css';
import '@tds-tchad/core/components/button/button.css';
import '@tds-tchad/core/components/input/input.css';

export default function LoginPage() {
  return (
    <main style={{
      maxWidth: '480px',
      margin: 'var(--tds-spacing-16) auto',
      padding: '0 var(--tds-spacing-4)',
    }}>
      <h1 style={{
        fontSize: 'var(--tds-font-size-4xl)',
        fontWeight: 'var(--tds-font-weight-semibold)',
        marginBottom: 'var(--tds-spacing-8)',
      }}>
        Connexion
      </h1>

      <form method="post" action="/login" noValidate>
        <div className="tds-field" style={{ marginBottom: 'var(--tds-spacing-5)' }}>
          <label className="tds-field__label" htmlFor="email">
            Adresse e-mail
          </label>
          <input
            id="email"
            name="email"
            type="email"
            className="tds-input tds-input--md"
            autoComplete="email"
            required
            placeholder="votre@email.td"
            aria-describedby="email-hint"
          />
          <p id="email-hint" className="tds-helper-text">
            Utilisez l'adresse e-mail liée à votre compte.
          </p>
        </div>

        <div className="tds-field" style={{ marginBottom: 'var(--tds-spacing-6)' }}>
          <label className="tds-field__label" htmlFor="password">
            Mot de passe
          </label>
          <input
            id="password"
            name="password"
            type="password"
            className="tds-input tds-input--md"
            autoComplete="current-password"
            required
          />
        </div>

        <button
          type="submit"
          className="tds-button tds-button--primary tds-button--md"
        >
          Se connecter
        </button>
      </form>
    </main>
  );
}

<script setup lang="ts">
import '@tds-tchad/core/tokens/color.css';
import '@tds-tchad/core/tokens/typography.css';
import '@tds-tchad/core/tokens/spacing.css';
import '@tds-tchad/core/tokens/radius.css';
import '@tds-tchad/core/components/button/button.css';
import '@tds-tchad/core/components/input/input.css';
</script>

<template>
  <main :style="{
    maxWidth: '480px',
    margin: 'var(--tds-spacing-16) auto',
    padding: '0 var(--tds-spacing-4)',
  }">
    <h1 :style="{
      fontSize: 'var(--tds-font-size-4xl)',
      fontWeight: 'var(--tds-font-weight-semibold)',
      marginBottom: 'var(--tds-spacing-8)',
    }">
      Connexion
    </h1>

    <form method="post" action="/login" novalidate>
      <div class="tds-field" style="margin-bottom: var(--tds-spacing-5);">
        <label class="tds-field__label" for="email">
          Adresse e-mail
        </label>
        <input
          id="email"
          name="email"
          type="email"
          class="tds-input tds-input--md"
          autocomplete="email"
          required
          placeholder="votre@email.td"
          aria-describedby="email-hint"
        />
        <p id="email-hint" class="tds-helper-text">
          Utilisez l'adresse e-mail liée à votre compte.
        </p>
      </div>

      <div class="tds-field" style="margin-bottom: var(--tds-spacing-6);">
        <label class="tds-field__label" for="password">
          Mot de passe
        </label>
        <input
          id="password"
          name="password"
          type="password"
          class="tds-input tds-input--md"
          autocomplete="current-password"
          required
        />
      </div>

      <button
        type="submit"
        class="tds-button tds-button--primary tds-button--md"
      >
        Se connecter
      </button>
    </form>
  </main>
</template>

Afficher un état d’erreur

Les champs TDS gèrent les états d’erreur via des classes modificatrices.

<!-- Champ en erreur -->
<div class="tds-field">
  <label class="tds-field__label" for="email">Adresse e-mail</label>
  <input
    id="email"
    type="email"
    class="tds-input tds-input--md tds-input--error"
    aria-invalid="true"
    aria-describedby="email-error"
    value="adresse-invalide"
  >
  <p id="email-error" class="tds-error-text" role="alert">
    Veuillez saisir une adresse e-mail valide.
  </p>
</div>

Utiliser les tokens TypeScript

Accédez aux valeurs de tokens dans votre logique applicative.

import { color, spacing, typography } from '@tds-tchad/core';

// Dans un système de thème, une génération CSS dynamique
// ou des tests de valeurs
const palette = {
  primary: color.blue[500],        // '#0033A0'
  danger: color.semantic.danger.text,  // '#82160F'
};

const scale = {
  unit: spacing.px[4],   // 16
  large: spacing.px[8],  // 32
};

// Vérifier les tailles typographiques
const sizes = Object.entries(typography.sizes).map(([name, value]) => ({
  name,
  value,
}));

C’est tout

Vous avez une interface TDS fonctionnelle. Explorez la suite :

Système de couleurs → — Palette complète et sémantique
Composant Button → — Toutes les variantes avec exemples
Composant Input → — Tous les types de champs
Patterns gouvernementaux → — Formulaires et pages types