Brickslab.

@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 (cliquer pour basculer)
checked=true (cliquer pour basculer)

état disabled

disabled + checked=false
disabled + checked=true

sans label

sans label

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.

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
/>