Reddot UI Library

Docs
Switch

Switch

A control that allows the user to toggle between checked and not checked.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/switch.json

Utilisation

import { Switch } from "@/components/ui/switch"
 
<Switch />

Exemples

Switch basique

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
 
export function SwitchDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">Mode avion</Label>
    </div>
  )
}

Intégration avec Form

"use client"
 
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"
 
import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
} from "@/components/ui/form"
import { Switch } from "@/components/ui/switch"
 
const FormSchema = z.object({
  marketing_emails: z.boolean().default(false).optional(),
  security_emails: z.boolean(),
})
 
export function SwitchForm() {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      security_emails: true,
    },
  })
 
  function onSubmit(data: z.infer<typeof FormSchema>) {
    toast("Vous avez soumis les valeurs suivantes", {
      description: (
        <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">
          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
        </pre>
      ),
    })
  }
 
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
        <div>
          <h3 className="mb-4 text-lg font-medium">Préférences email</h3>
          <div className="space-y-4">
            <FormField
              control={form.control}
              name="marketing_emails"
              render={({ field }) => (
                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                  <div className="space-y-0.5">
                    <FormLabel className="text-base">
                      Emails marketing
                    </FormLabel>
                    <FormDescription>
                      Recevoir des emails sur les nouveaux produits, fonctionnalités et plus.
                    </FormDescription>
                  </div>
                  <FormControl>
                    <Switch
                      checked={field.value}
                      onCheckedChange={field.onChange}
                    />
                  </FormControl>
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="security_emails"
              render={({ field }) => (
                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                  <div className="space-y-0.5">
                    <FormLabel className="text-base">Emails de sécurité</FormLabel>
                    <FormDescription>
                      Recevoir des emails sur l'activité de votre compte et sécurité.
                    </FormDescription>
                  </div>
                  <FormControl>
                    <Switch
                      checked={field.value}
                      onCheckedChange={field.onChange}
                    />
                  </FormControl>
                </FormItem>
              )}
            />
          </div>
        </div>
        <Button type="submit">Enregistrer les préférences</Button>
      </form>
    </Form>
  )
}

Switch avec état

"use client"
 
import { useState } from "react"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
 
export function SwitchWithState() {
  const [isEnabled, setIsEnabled] = useState(false)
 
  return (
    <div className="flex items-center space-x-2">
      <Switch
        id="notifications"
        checked={isEnabled}
        onCheckedChange={setIsEnabled}
      />
      <Label htmlFor="notifications">
        Notifications {isEnabled ? "activées" : "désactivées"}
      </Label>
    </div>
  )
}

API Reference

Switch

Un contrôle qui permet à l'utilisateur de basculer entre coché et non coché.

PropTypeDefaultDescription
defaultCheckedbooleanfalseL'état coché par défaut du switch.
checkedboolean-L'état coché contrôlé du switch.
onCheckedChange(checked: boolean) => void-Gestionnaire d'événement appelé lorsque l'état coché change.
disabledbooleanfalseQuand true, empêche l'utilisateur d'interagir avec le switch.
requiredbooleanfalseQuand true, indique que l'utilisateur doit cocher le switch avant de pouvoir soumettre le formulaire propriétaire.
namestring-Le nom du contrôle. Soumis avec son valeur associée lors de la soumission d'un formulaire.
valuestring"on"La valeur donnée comme données lorsque soumise avec un nom.

Conseils d'utilisation

Quand utiliser Switch vs Checkbox

  • Switch : Pour des actions immédiates ou des états (activer/désactiver une fonctionnalité)
  • Checkbox : Pour des sélections multiples ou des confirmations

Bonnes pratiques

  1. Labels clairs : Utilisez des labels descriptifs qui indiquent ce que le switch contrôle
  2. État visible : L'état du switch doit être clairement visible
  3. Feedback immédiat : Les changements doivent prendre effet immédiatement
  4. Accessibilité : Toujours associer avec un label pour l'accessibilité

Références