BjCheckbox

Case à cocher React avec libellé ou enfants, texte d’aide et attributs name et value pour les formulaires.

Utilisation

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

export default function Example() {
  const [accept, setAccept] = useState(false)
  return (
    <BjCheckbox
      checked={accept}
      onChange={(e) => setAccept(e.target.checked)}
      label="J’accepte les conditions d’utilisation"
      hint="Obligatoire pour créer un compte"
      name="terms"
      value="yes"
    />
  )
}

Aperçu

J’accepte les conditions d’utilisation Obligatoire pour créer un compte

Enfants comme libellé

children remplace label pour un libellé riche.

Newsletter — offres ponctuelles

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

export default function Example() {
  const [on, setOn] = useState(true)
  return (
    <BjCheckbox name="news" value="1" checked={on} onChange={(e) => setOn(e.target.checked)}>
      <strong>Newsletter</strong> — offres ponctuelles
    </BjCheckbox>
  )
}

Désactivé

checked et disabled ensemble.

Option indisponible

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

export default function Example() {
  return (
    <BjCheckbox checked disabled label="Option indisponible" name="x" value="1" />
  )
}

Combinaisons

Plusieurs cases avec name et value pour un formulaire.

PréférencesE-mailSMSFrais opérateur

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

export default function Example() {
  const [a, setA] = useState(false)
  const [b, setB] = useState(true)
  return (
    <fieldset>
      <legend class="bj-label">Préférences</legend>
      <BjCheckbox name="prefs" value="email" checked={a} onChange={(e) => setA(e.target.checked)} label="E-mail" />
      <BjCheckbox name="prefs" value="sms" checked={b} onChange={(e) => setB(e.target.checked)} label="SMS" hint="Frais opérateur" />
    </fieldset>
  )
}

Contrôle et callbacks

checked et onChange avec e.target.checked ; name et value pour la soumission.

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

export default function Example() {
  const [ok, setOk] = useState(false)
  return (
    <BjCheckbox
      id="terms-check"
      checked={ok}
      onChange={(e) => setOk(e.target.checked)}
      label="J’accepte"
      name="terms"
      value="accepted"
    />
  )
}

Props

Prop	Description
`checked`	État coché 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 la case.
`name`	Attribut name du input.
`value`	Attribut value du input.
`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 et size sont réservés).