---
title: "Composants UI — Documentation Fonctionnelle"
module: dev
type: functional
status: active
updated: 2026-03-13
---

# Composants UI — Documentation Fonctionnelle

> Référence des composants réutilisables du design system ISI-APP (Onyx + Bootstrap).

---

## Vue d'ensemble

ISI-APP dispose d'une bibliothèque de composants Blade réutilisables regroupés sous deux namespaces : `x-global.*` pour les champs de formulaire courants, et `x-livewire.form.*` pour les selects avancés avec recherche. Ces composants standardisent l'apparence, gèrent automatiquement la validation et s'intègrent nativement avec Livewire via `wire:model`.

## Accès

Ces composants sont disponibles dans toutes les vues Blade du projet. Aucun droit particulier n'est requis pour les utiliser.

## Composants de formulaire (`x-global.input.*`)

Chaque composant accepte un label, un nom, une icône optionnelle et un binding Livewire (`liveModel`). La validation et l'affichage des erreurs sont gérés automatiquement.

| Composant | Usage |
|-----------|-------|
| `x-global.input.text` | Champ texte standard |
| `x-global.input.email` | Champ email avec validation de format |
| `x-global.input.tel` | Numéro de téléphone |
| `x-global.input.url` | URL / site web |
| `x-global.input.number` | Nombre (avec min/max optionnels) |
| `x-global.input.date` | Sélecteur de date |
| `x-global.input.textarea` | Zone de texte multiligne |
| `x-global.input.select` | Liste déroulante simple |
| `x-global.input.file` | Sélection de fichier (avec filtres d'extension) |

## Selects avancés (`x-livewire.form.*`)

Pour les listes longues ou nécessitant une recherche, trois composants Tom-Select sont disponibles :

| Composant | Usage |
|-----------|-------|
| `select-single-tom` | Sélection unique avec recherche intégrée |
| `select-multiple-tom` | Sélection multiple avec recherche |
| `select-paginate-tom` | Sélection multiple avec chargement AJAX (grands jeux de données) |

## Retours visuels

| Composant | Usage |
|-----------|-------|
| `x-global.alert` | Messages de succès, avertissement, danger ou info |
| `x-global.badge` | Étiquettes colorées (primary, success, danger, warning, info) |
| Boutons HTML | Classes Bootstrap : `btn-primary`, `btn-sm`, `btn-lg` |
| Spinner | Indicateur de chargement via `.spinner-border` |

## Conteneurs

| Composant | Usage |
|-----------|-------|
| Cards Bootstrap | Sections avec en-tête et corps |
| Modals Livewire | Fenêtres contextuelles pour formulaires |
| Onglets (`nav-tabs`) | Navigation par onglets |
| Accordéons | Sections repliables |

## Icônes

Le projet utilise FontAwesome. Les icônes courantes : `fas fa-user`, `fas fa-edit`, `fas fa-trash`, `fas fa-search`, `fas fa-plus`, `fas fa-download`, `fas fa-calendar`, `fas fa-building`.

## Responsive

Les mises en page s'appuient sur la grille Bootstrap avec les breakpoints standards : `col-sm-*` (576px+), `col-md-*` (768px+), `col-lg-*` (992px+), `col-xl-*` (1200px+).

## Bonnes pratiques

- Toujours utiliser les composants plutôt que du HTML brut
- Marquer les champs obligatoires avec `*` dans le label
- Utiliser `wire:model` Livewire plutôt que des événements `@change`
- Regrouper les champs logiquement avec la grille Bootstrap
- Fournir un placeholder informatif et un label descriptif

## Voir aussi

- Documentation technique : `.claude/technical-docs/dev/ui-components-reference.md`