Brickslab.Toolsv2.1.1

@brickslab./ui-web

Interrupteur à bascule pour activer/désactiver une option. Composant contrôlé : l'état checked et le callback onChange sont gérés par le parent. Supporte un label et un état désactivé.

Aperçu

états checked et unchecked — interactifs

checked=false
checked=true

État disabled

disabled + checked=false · disabled + checked=true

disabled + unchecked
disabled + checked

Sans label

toggle seul — utile dans des tableaux ou formulaires compacts

Groupe contrôlé

plusieurs toggles indépendants gérés par useState

Props

PropTypeDéfautRequisDescription
checkedboolean—✓État coché/non coché du toggle. Composant contrôlé.
onChange(checked: boolean) => void—✓Callback déclenché lors du changement d'état. Reçoit la nouvelle valeur booléenne.
labelstring——Libellé associé au toggle pour l'accessibilité et l'affichage.
disabledbooleanfalse—Désactive l'interaction avec le toggle.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  checked={true}
  onChange={true}
  label="..."
  disabled={false}
/>
checkedonChangelabeldisabled

Utilisation

tsx
import { ToggleSwitch } from "@brickslab./ui-web";
import { useState } from "react";

function Demo() {
  const [enabled, setEnabled] = useState(false);

  return (
    <ToggleSwitch
      checked={enabled}
      onChange={setEnabled}
      label="Notifications"
    />
  );
}

// État désactivé
<ToggleSwitch
  checked={false}
  onChange={() => {}}
  label="Option désactivée"
  disabled
/>