RadioButton

import { RadioButton } from '@megafon/ui-core';

Примеры и код

Свойства и методы

Состояние переключателя

<RadioButton value="not-checked-value" isChecked={false}>Not checked</RadioButton>
<RadioButton value="checked-value" isChecked>Checked</RadioButton>
<RadioButton value="disabled-value" disabled>Disabled</RadioButton>
<RadioButton value="disabled-value" isChecked disabled>Disabled</RadioButton>

Светлая тема на темном фоне

<RadioButton value="not-checked-value" isChecked={false} color={'light'}>
  Not checked
</RadioButton>
<RadioButton value="checked-value" isChecked color={'light'}>
  Checked
</RadioButton>
<RadioButton value="disabled-value" disabled color={'light'}>
  Disabled
</RadioButton>
<RadioButton value="disabled-value" isChecked disabled color={'light'}>
  Disabled
</RadioButton>

Типы переключения

Контролируемое

<DemoRadioButtonWrapper>
  {({ onChange, selectedOption }) => (
      <>
          <RadioButton value="value-1" isChecked={selectedOption === 'value-1'} onChange={onChange}>
              First radio button
          </RadioButton>
          <RadioButton value="value-2" isChecked={selectedOption === 'value-2'} onChange={onChange}>
              Second radio button
          </RadioButton>
      </>
  )}
</DemoRadioButtonWrapper>

Код DemoRadioButtonWrapperexport const DemoRadioButtonWrapper = ({ children }) => {
    const [selectedOption, setSelectedOption] = React.useState('');

    const handleChange = value => {
        setSelectedOption(value);
    };

    return (
        <>
            <p style={{ textAlign: 'center', marginTop: 0 }}>
                <b>Value:</b> "{selectedOption || undefined}"
            </p>
            <div style={flexStyle}>
                {children({
                    onChange: handleChange,
                    selectedOption: selectedOption,
                })}
            </div>
        </>
    );
};

Неконтролируемое

<DemoRadioButtonWrapper>
  {({ onChange, selectedOption }) => (
      <>
          <RadioButton value="value-1" name="group-1" onChange={onChange}>
              First radio button
          </RadioButton>
          <RadioButton value="value-2" name="group-1" onChange={onChange}>
              Second radio button
          </RadioButton>
      </>
  )}
</DemoRadioButtonWrapper>

Код DemoRadioButtonWrapperexport const DemoRadioButtonWrapper = ({ children }) => {
    const [selectedOption, setSelectedOption] = React.useState('');

    const handleChange = value => {
        setSelectedOption(value);
    };

    return (
        <>
            <p style={{ textAlign: 'center', marginTop: 0 }}>
                <b>Value:</b> "{selectedOption || undefined}"
            </p>
            <div style={flexStyle}>
                {children({
                    onChange: handleChange,
                    selectedOption: selectedOption,
                })}
            </div>
        </>
    );
};

Размер лейблов

<RadioButton name="group-2" value="value-1" textSize="small">
  Маленький размер
</RadioButton>
<RadioButton name="group-2" value="value-2" textSize="medium">
  Средний размер
</RadioButton>

Prop name	Type	Default	Description
color	"dark" \| "light"	dark	Тема кнопки
value*	string		Значение
name	string		Имя для тега form
textSize	"small" \| "medium"	medium	Размер текста лейбла
disabled	boolean	false	Отключение радио-кнопки
isChecked	boolean		Управление состоянием вкл/выкл компонента
className	string \| string[]		Дополнительный класс корневого элемента
classes	{ root?: string; label?: string; customInput?: string; labelText?: string; }	{}	Дополнительные классы для корневого и внутренних элементов
dataAttrs	{ root?: Record<string, string>; input?: Record<string, string>; text?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам
onChange	(value: string) => void		Обработчик изменения значения 'value'
inputRef	Ref<HTMLInputElement>		Ссылка на input