Введение
AccordionBadgesBannerButtonCalendarCaptionCarouselCheckboxChipsContentAreaContentViewCounterGridHeaderLinkListNavArrowNotificationPaginationParagraphPreloaderRadioButtonSearchSelectSelectorSlidersSnackbarStoreButtonSwitcherTabsTextFieldTextLinkTileTooltip
AccordionBoxAudioPlayerBannerBoxBenefitsIconsBenefitsPicturesBreadcrumbsButtonBannerButtonLinkBoxCardCardsBoxCarouselBoxContainerDownloadLinksFaqWrapperImageBannerInstructionsNotificationBoxPageTitlePartnersPictureWithDescriptionPropertyStepsStoreBannerTableTabsBoxTextBoxTextWithIconTitleDescriptionBoxVideoBannerVideoBlock
ИконкиЦвета

RadioButton

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

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

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

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

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

Value: ""

Код DemoRadioButtonWrapper
export 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>
        </>
    );
}

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

Value: ""

Код DemoRadioButtonWrapper
export 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>
        </>
    );
}

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