> Switch

Switch

Interrupteur avec label, supportant les modes contrôlé et non-contrôlé.

TagsuiExemples2StylesDisponibles

Default

Non activéActivéDésactivéActivé désactivé

export const Default = () => (
  <Box display="flex" flexDirection="column" gap={24}>
    <Switch label="Non activé" />
    <Switch label="Activé" checked />
    <Switch label="Désactivé" disabled />
    <Switch label="Activé désactivé" checked disabled />
  </Box>
);

Controlled

Désactivé

export const Controlled = () => {
  const [value, setValue] = useState(false);
  return <Switch label={value ? 'Activé' : 'Désactivé'} checked={value} onCheckedChange={v => setValue(!!v)} />;
};

Alveole UI Kit — v1.8.4