Interrupteur
Un bouton bascule « activé/désactivé » permettant de modifier instantanément certains paramètres — notifications, mode sombre, options expérimentales —, le tout dans un style néobrutaliste caractérisé par des contours et des ombres.
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
Le switch est une bascule à deux états — activé ou désactivé, l’effet s’appliquant à l’instant même où il bascule, sans bouton d’envoi. Construit sur le composant Base UI Switch et stylisé selon la recette néobrutaliste : bordures épaisses, ombres franches et typographie affirmée.
À privilégier dans ces cas :
- Panneaux de réglages — notifications, mode sombre, lecture automatique : des préférences à effet immédiat.
- Feature flags — activez une fonctionnalité bêta ou basculez entre facturation mensuelle et annuelle.
- Contrôles par ligne — activez ou suspendez des éléments d’un tableau ou d’une liste sans ouvrir de formulaire.
Installation#
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/switch.jsonnpx shadcn@latest add https://neobrutalism.com/r/base/switch.jsonyarn dlx shadcn@latest add https://neobrutalism.com/r/base/switch.jsonbunx --bun shadcn@latest add https://neobrutalism.com/r/base/switch.json
Installez les dépendances suivantes :
pnpm add @base-ui/reactnpm install @base-ui/reactyarn add @base-ui/reactbun add @base-ui/react
Copiez-collez le code suivant dans votre projet.
"use client"
import * as React from "react"
import { Switch as SwitchPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
function Switch({
className,
size = "default",
...props
}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
size?: "sm" | "default"
}) {
return (
<SwitchPrimitive.Root
data-slot="switch"
data-size={size}
className={cn(
"peer group/switch relative inline-flex shrink-0 cursor-pointer items-center border-2 border-foreground transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-invalid:border-destructive data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-5 data-[size=sm]:w-9 data-checked:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
className
)}
{...props}
>
<SwitchPrimitive.Thumb
data-slot="switch-thumb"
className="pointer-events-none mx-0.5 block border-2 border-foreground bg-primary transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-5 group-data-[size=sm]/switch:data-checked:translate-x-4 data-checked:bg-background data-unchecked:translate-x-0"
/>
</SwitchPrimitive.Root>
)
}
export { Switch }
Adaptez les chemins d’import à la configuration de votre projet.
Utilisation#
import { Switch } from "@/components/ui/switch"<Switch />Exemples#
Description#
import {
Field,
FieldContent,Carte de choix#
Sélection façon carte, où FieldLabel enveloppe tout le Field pour obtenir une carte cliquable.
import {
Field,
FieldContent,Désactivé#
Ajoutez la prop disabled au composant Switch pour désactiver l’interrupteur. Ajoutez la prop data-disabled au composant Field pour la mise en forme.
import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
Invalide#
Ajoutez la prop aria-invalid au composant Switch pour signaler un état invalide. Ajoutez la prop data-invalid au composant Field pour la mise en forme.
import {
Field,
FieldContent,Taille#
Utilisez la prop size pour modifier la taille de l’interrupteur.
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
RTL#
Pour activer le RTL dans Neobrutalism, consultez le guide de configuration RTL.
"use client"
import * as React from "react"Accessibilité#
Le switch suit le modèle WAI-ARIA Switch : il rend un vrai bouton avec role="switch" et aria-checked, plus un champ masqué pour que la valeur soit envoyée avec le formulaire englobant.
Interactions au clavier :
| Touche | Action |
|---|---|
Tab / Shift + Tab | Amène le focus sur le switch / l’en éloigne |
Space | Bascule le switch |
Enter | Bascule le switch |
Référence API#
Consultez la documentation Base UI Switch.