Onglets

علامات التبويبTabs

Stablesrc/dsm/components/tabs.tsx

Les onglets basculent entre plusieurs panneaux liés sur une même page, sans rechargement. Le curseur (`Tabs.Indicator`) glisse vers l'onglet actif ; la navigation au clavier (flèches, Origine/Fin) est fournie par Base UI.

Import

import { Tabs } from "@/dsm/components/tabs";

Exemples

Variante soulignée

Le trait glissant, sous les onglets — variante par défaut.

LTR

Copie de la CNIE en cours de validité, ancienne carte grise, certificat de vente ou facture d'achat, attestation d'assurance en cours.

Variante pilules

Un fond glissant sur onglets arrondis, pour un encart compact.

LTR

7 démarches suivies, dont 2 en attente de pièces justificatives.

Avec icônes

Une icône avant chaque libellé d'onglet.

LTR

Formulaire rempli, deux photos d'identité récentes, copie du CNIE des deux parents.

Fiche démarche

Trois onglets pour organiser la fiche d'une démarche administrative.

LTR

En ligneCNSS

Adhérer à l'Assurance Maladie Obligatoire

Ouverte à tout salarié affilié à la CNSS ou à toute personne exerçant une activité indépendante déclarée.

Usage

Quand l'utiliser

Utilisez les onglets pour regrouper des contenus de même niveau et de même nature (ex. « Documents requis », « Délais et tarifs », « Où déposer »).
Choisissez la variante `pills` dans un encart ou une barre d'outils compacte, `underline` pour une section de page pleine largeur.

Quand ne pas l'utiliser

N'utilisez pas les onglets pour une séquence à suivre dans l'ordre (étapes d'une démarche) : utilisez plutôt `Steps`.
Ne masquez pas d'information essentielle uniquement derrière un onglet non actif : un lecteur pressé ne doit rien manquer d'important.

Accessibilité & langues

Accessibilité

Les rôles `tablist`/`tab`/`tabpanel` et la navigation au clavier (flèches gauche/droite, Origine, Fin) sont gérés par Base UI.
Chaque panneau reste focusable (`tabIndex`) et reçoit un anneau de focus visible.

RTL & multilingue

L'indicateur glissant se positionne à partir de mesures de pixels déjà cohérentes avec l'inversion visuelle du conteneur flex en RTL : aucune classe `rtl:` n'est nécessaire.
Le sens de navigation au clavier (flèche gauche/droite) s'inverse automatiquement avec le sens de lecture.

Propriétés

Tabs

Propriété	Type	Défaut	Description
defaultValue	string \| number	—	Valeur de l'onglet actif par défaut (non contrôlé).
value	string \| number	—	Valeur de l'onglet actif (contrôlé).
onValueChange	(value) => void	—	Appelé au changement d'onglet.

TabsList

Propriété	Type	Défaut	Description
variant	"underline" \| "pills"	underline	Style du groupe d'onglets et de l'indicateur glissant.
className	string	—	Classes Tailwind supplémentaires.

Tab

Propriété	Type	Défaut	Description
value*	string \| number	—	Valeur associée au panneau correspondant.
icon	ReactNode	—	Icône optionnelle affichée avant le libellé.
disabled	boolean	—	Désactive l'onglet.

TabPanel

Propriété	Type	Défaut	Description
value*	string \| number	—	Valeur de l'onglet dont ce panneau dépend.
className	string	—	Classes Tailwind supplémentaires.