Les contrôles avec état suivent le modèle contrôlé ou non contrôlé de React.

• Utilisez value, checked ou open lorsque l’application gère l’état.
• Utilisez defaultValue, defaultChecked ou defaultOpen pour que le composant initialise et gère son propre état.
• Gérez le callback correspondant pour observer ou accepter les changements.

import { useState } from "react"
import { Toggle } from "@liquidify/react"

export function NotificationsSetting() {
  const [enabled, setEnabled] = useState(false)
  return (
    <Toggle
      aria-label="Notifications"
      checked={enabled}
      onChange={setEnabled}
    />
  )
}

Ne passez pas un composant monté du mode contrôlé au mode non contrôlé, ni inversement. Avec le rendu serveur, utilisez la même valeur initiale sur le serveur et lors du premier rendu client.

Les callbacks signalent les changements demandés par l’utilisateur. La prop contrôlée détermine toujours l’état : mettez-la à jour pour accepter le changement. Consultez les noms des callbacks et les types de valeurs sur la page de chaque composant.