BjToggle

Interrupteur React (case à cocher stylée avec role switch), libellé optionnel, bordure et libellé à gauche.

Utilisation

import { useState } from 'react'
import { BjToggle } from '@flrxnt/dsbj/react'

export default function Example() {
  const [notify, setNotify] = useState(true)
  return (
    <BjToggle
      checked={notify}
      onChange={(e) => setNotify(e.target.checked)}
      label="Notifications par e-mail"
      hint="Résumé quotidien"
      border
    />
  )
}

Aperçu

Notifications par e-mail Résumé quotidien

Libellé à gauche

labelLeft applique bj-toggle--label-left (interrupteur à droite).

Mode sombre

import { useState } from 'react'
import { BjToggle } from '@flrxnt/dsbj/react'

export default function Example() {
  const [on, setOn] = useState(false)
  return (
    <BjToggle
      labelLeft
      border
      checked={on}
      onChange={(e) => setOn(e.target.checked)}
      label="Mode sombre"
    />
  )
}

Enfants comme libellé

children remplace label.

Activer les alertes

import { useState } from 'react'
import { BjToggle } from '@flrxnt/dsbj/react'

export default function Example() {
  const [on, setOn] = useState(true)
  return (
    <BjToggle checked={on} onChange={(e) => setOn(e.target.checked)} border>
      Activer les <strong>alertes</strong>
    </BjToggle>
  )
}

Désactivé

checked et disabled sur le switch.

Fonctionnalité verrouillée

import { BjToggle } from '@flrxnt/dsbj/react'

export default function Example() {
  return <BjToggle checked label="Fonctionnalité verrouillée" disabled border />
}

Combinaisons

border + labelLeft + hint sur le même composant.

Notifications push Uniquement sur cet appareil

import { useState } from 'react'
import { BjToggle } from '@flrxnt/dsbj/react'

export default function Example() {
  const [v, setV] = useState(true)
  return (
    <BjToggle
      id="notify-toggle"
      border
      labelLeft
      checked={v}
      onChange={(e) => setV(e.target.checked)}
      label="Notifications push"
      hint="Uniquement sur cet appareil"
    />
  )
}

Contrôle et callbacks

checked et onChange avec e.target.checked ; id explicite pour l’accessibilité.

import { useState } from 'react'
import { BjToggle } from '@flrxnt/dsbj/react'

export default function Example() {
  const [enabled, setEnabled] = useState(false)
  return (
    <BjToggle
      id="feature-flag"
      checked={enabled}
      onChange={(e) => setEnabled(e.target.checked)}
      label="Fonction expérimentale"
    />
  )
}

Props

Prop	Description
`checked`	État activé contrôlé, booléen.
`onChange`	Gestionnaire de changement sur l’input natif.
`label`	Texte du libellé si aucun enfant n’est fourni.
`hint`	Texte d’aide sous le libellé.
`disabled`	Désactive l’interrupteur.
`border`	Si vrai, ajoute la classe bj-toggle--border.
`labelLeft`	Si vrai, ajoute bj-toggle--label-left.
`id`	Identifiant du input ; sinon généré automatiquement.
`children`	Contenu du libellé ; remplace label si présent.
`className`	Classe CSS sur l’élément label racine.
`…`	Autres attributs HTML natifs du input (type, size et role sont réservés).