BjRadio

Bouton radio React : chaque instance a une value obligatoire ; liez checked et onChange à un état partagé pour le groupe.

Utilisation

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

export default function Example() {
  const [plan, setPlan] = useState('basic')
  return (
    <>
      <BjRadio
        name="plan"
        value="basic"
        checked={plan === 'basic'}
        onChange={() => setPlan('basic')}
        label="Formule de base"
      />
      <BjRadio
        name="plan"
        value="pro"
        checked={plan === 'pro'}
        onChange={() => setPlan('pro')}
        label="Formule professionnelle"
        hint="Facturation annuelle"
      />
    </>
  )
}

Aperçu

Formule de base Formule professionnelle Facturation annuelle

Option désactivée

Une option peut être disabled dans le même name.

GratuitProLegacy

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

export default function Example() {
  const [tier, setTier] = useState('free')
  return (
    <>
      <BjRadio name="tier" value="free" checked={tier === 'free'} onChange={() => setTier('free')} label="Gratuit" />
      <BjRadio name="tier" value="pro" checked={tier === 'pro'} onChange={() => setTier('pro')} label="Pro" />
      <BjRadio name="tier" value="legacy" checked={tier === 'legacy'} onChange={() => setTier('legacy')} label="Legacy" disabled />
    </>
  )
}

Enfants comme libellé

children remplace label pour du contenu riche.

Option A

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

export default function Example() {
  const [v, setV] = useState('a')
  return (
    <BjRadio name="pick" value="a" checked={v === 'a'} onChange={() => setV('a')}>
      Option <em>A</em>
    </BjRadio>
  )
}

Groupe complet

Trois radios partageant name et un état unique.

RégionNordSudBord maritimeCentre

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

export default function Example() {
  const [region, setRegion] = useState('north')
  return (
    <fieldset>
      <legend class="bj-label">Région</legend>
      <BjRadio id="rad-n" name="region" value="north" checked={region === 'north'} onChange={() => setRegion('north')} label="Nord" />
      <BjRadio id="rad-s" name="region" value="south" checked={region === 'south'} onChange={() => setRegion('south')} label="Sud" hint="Bord maritime" />
      <BjRadio id="rad-c" name="region" value="center" checked={region === 'center'} onChange={() => setRegion('center')} label="Centre" />
    </fieldset>
  )
}

Contrôle et callbacks

checked selon la value choisie ; onChange met à jour l’état (value et name requis).

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

export default function Example() {
  const [plan, setPlan] = useState('basic')
  function pick(next: string) {
    setPlan(next)
  }
  return (
    <>
      <BjRadio name="plan" value="basic" checked={plan === 'basic'} onChange={() => pick('basic')} label="Basic" />
      <BjRadio name="plan" value="pro" checked={plan === 'pro'} onChange={() => pick('pro')} label="Pro" />
    </>
  )
}

Props

Prop	Description
`value`	Valeur de cette option (obligatoire).
`checked`	Si vrai, cette option est sélectionnée dans le groupe.
`onChange`	Gestionnaire de changement ; mettez à jour l’état avec la value de l’option choisie.
`label`	Texte du libellé si aucun enfant n’est fourni.
`hint`	Texte d’aide sous le libellé.
`disabled`	Désactive ce radio.
`name`	Attribut name commun au groupe.
`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 non couverts par les props du composant.