Радиокнопка

Выбор одного варианта из набора; может использоваться самостоятельно или в составе LhRadioGroup.

Базовое использование

Групповой выбор

ТушьДаньцинПустое пространствоГунби (отключено)

Выбрано: 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">Тушь</LhRadio>
      <LhRadio value="danqing">Даньцин</LhRadio>
      <LhRadio value="blank">Пустота</LhRadio>
    </LhRadioGroup>
  )
}

Radio Props

Свойство	Описание	Тип	Варианты	По умолчанию
value	Значение варианта (обязательное)	unknown	—	—
checked	Контролируемое состояние выбора (при самостоятельном использовании)	boolean	—	—
defaultChecked	Неконтролируемое значение по умолчанию	boolean	—	false
label	Отображаемый текст	string	—	—
disabled	Отключить	boolean	—	false
size	Размер	'large' | 'middle' | 'small'	—	Следует за ConfigProvider
name	Нативный атрибут name (прокидывается Group)	string	—	—
sx	Сокращённые props макета	SxProps	—	—

События Radio

Событие	Описание	Сигнатура коллбэка	Аналог в Vue
onChange	Срабатывает при выборе (два аргумента)	(checked: boolean, event: ChangeEvent) => void	@change

RadioGroup Props

Свойство	Описание	Тип	По умолчанию
value	Контролируемое выбранное значение	unknown	—
defaultValue	Неконтролируемое значение по умолчанию	unknown	—
disabled	Отключить все дочерние элементы	boolean	false
size	Размер дочерних элементов	'large' | 'middle' | 'small'	Следует за ConfigProvider
name	Нативный name, прокидываемый дочерним элементам	string	—

События RadioGroup

Событие	Описание	Сигнатура коллбэка	Аналог в Vue
onChange	Срабатывает при изменении выбора; аргумент коллбэка — значение выбранного варианта	(value: unknown) => void	@change

Различие аргументов onChange

Коллбэк onChange у LhRadio — это (checked, event); а коллбэк onChange у LhRadioGroup напрямую получает value выбранного варианта — это согласуется с CheckboxGroup.

Стили

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