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>