Botón de radio

Selección única dentro de un conjunto de opciones; admite uso individual o combinado con LhRadioGroup.

Uso básico

Selección única en grupo

Tinta chinaDanqingEspacio en blancoGongbi (desactivado)

Seleccionado: 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">Tinta</LhRadio>
      <LhRadio value="danqing">Danqing</LhRadio>
      <LhRadio value="blank">Blanco</LhRadio>
    </LhRadioGroup>
  )
}

Props de Radio

Prop	Descripción	Tipo	Opciones	Predeterminado
value	Valor de la opción (obligatorio)	unknown	—	—
checked	Estado controlado (uso individual)	boolean	—	—
defaultChecked	Selección predeterminada no controlada	boolean	—	false
label	Texto mostrado	string	—	—
disabled	Desactivado	boolean	—	false
size	Tamaño	'large' | 'middle' | 'small'	—	Según ConfigProvider
name	Atributo nativo name (lo transmite el Group)	string	—	—
sx	Propiedad abreviada de diseño	SxProps	—	—

Eventos de Radio

Evento	Descripción	Firma del callback	Equivalente en Vue
onChange	Se dispara al seleccionar (dos parámetros)	(checked: boolean, event: ChangeEvent) => void	@change

Props de RadioGroup

Prop	Descripción	Tipo	Predeterminado
value	Valor seleccionado controlado	unknown	—
defaultValue	Valor predeterminado no controlado	unknown	—
disabled	Desactiva todos los subelementos	boolean	false
size	Tamaño de los subelementos	'large' | 'middle' | 'small'	Según ConfigProvider
name	Atributo nativo name transmitido a los subelementos	string	—

Eventos de RadioGroup

Evento	Descripción	Firma del callback	Equivalente en Vue
onChange	Cambio de selección; el parámetro del callback es el value de la opción	(value: unknown) => void	@change

Diferencia de parámetros de onChange

El callback onChange de LhRadio es (checked, event); el callback onChange de LhRadioGroup es directamente el value de la opción seleccionada, igual que en CheckboxGroup.

Estilos

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