Bouton radio

Sélection unique au sein d'un groupe d'options ; s'utilise seul ou combiné avec LhRadioGroup.

Utilisation de base

Groupe radio

Encre de ChineDanqingEspace videGongbi (désactivé)

Sélectionné : ink

import { useState } from 'react'
import { LhRadio, LhRadioGroup } from '@lh-ui/react'

export default function Demo() {
  const [value, setValue] = useState('ink')

  return (
    <LhRadioGroup value={value} onChange={(val) => setValue(val as string)}>
      <LhRadio value="ink">Encre</LhRadio>
      <LhRadio value="danqing">Danqing</LhRadio>
      <LhRadio value="blank">Vide</LhRadio>
    </LhRadioGroup>
  )
}

Radio Props

Prop	Description	Type	Options	Valeur par défaut
value	Valeur de l'option (requise)	unknown	—	—
checked	État sélectionné contrôlé (usage isolé)	boolean	—	—
defaultChecked	Sélection par défaut (non contrôlée)	boolean	—	false
label	Texte affiché	string	—	—
disabled	Désactivé	boolean	—	false
size	Taille	'large' | 'middle' | 'small'	—	Selon ConfigProvider
name	Attribut natif name (transmis par le groupe)	string	—	—
sx	Raccourci de mise en page	SxProps	—	—

Événements de Radio

Événement	Description	Signature du callback	Équivalent Vue
onChange	Déclenché à la sélection (deux paramètres)	(checked: boolean, event: ChangeEvent) => void	@change

RadioGroup Props

Prop	Description	Type	Valeur par défaut
value	Valeur sélectionnée contrôlée	unknown	—
defaultValue	Valeur par défaut (non contrôlée)	unknown	—
disabled	Désactive tous les enfants	boolean	false
size	Taille des enfants	'large' | 'middle' | 'small'	Selon ConfigProvider
name	Attribut natif name transmis aux enfants	string	—

Événements de RadioGroup

Événement	Description	Signature du callback	Équivalent Vue
onChange	Changement de sélection ; le paramètre du callback est la value de l'option	(value: unknown) => void	@change

Différence de paramètres de onChange

Le callback onChange de LhRadio est (checked, event) ; celui de LhRadioGroup est directement la value de l'option sélectionnée — comme pour CheckboxGroup.

Styles

import '@lh-ui/react/style/radio'