Figma

Checkbox

import { Checkbox } from '@megafon/ui-core';
Код CheckboxWrapper
export const CheckboxWrapper: React.FC<ICheckboxWrapperProps> = ({ children }) => {
    const [checked, setChecked] = React.useState<boolean>(false);


    const handleChange = () => {
        setChecked(!checked);
    };


    return (
        <div style={{ maxWidth: '500px' }}>
            {children({
                checked,
                onChange: handleChange,
            })}
        </div>
    );
};

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


  <CheckboxWrapper>
      {({ checked, onChange }) =>
          <Checkbox
              checked={checked}
              onChange={onChange}
          >
              Согласен
          </Checkbox>
      }
  </CheckboxWrapper>
  <CheckboxWrapper>
      {({ checked, onChange }) =>
          <Checkbox
              checked={checked}
              onChange={onChange}
              disableBottomMargin
          >
              Даю согласие на получение рекламы от ПАО «МегаФон» и третьих лиц в целях продвижения услуг
          </Checkbox>
      }
  </CheckboxWrapper>

Маленький размер текста


  <CheckboxWrapper>
      {({ checked, onChange }) =>
          <Checkbox
              checked={checked}
              onChange={onChange}
              fontSize="small"
          >
              Согласен
          </Checkbox>
      }
  </CheckboxWrapper>
  <CheckboxWrapper>
      {({ checked, onChange }) =>
          <Checkbox
              checked={checked}
              onChange={onChange}
              fontSize="small"
              disableBottomMargin
          >
              Даю согласие на получение рекламы от ПАО «МегаФон» и третьих лиц в целях продвижения услуг
          </Checkbox>
      }
  </CheckboxWrapper>

Без текста


  <CheckboxWrapper>
      {({ checked, onChange }) =>
          <Checkbox
              checked={checked}
              onChange={onChange}
              disableBottomMargin
          />
      }
  </CheckboxWrapper>

Дополнительный контент справа


  <CheckboxWrapper>
      {({ checked, onChange }) =>
          <Checkbox
              checked={checked}
              onChange={onChange}
              extraContent={
                  <AttentionIcon style={{ display: 'block', width: '20px', height: '20px', fill: 'var(--systemBlue)'}} />
              }
          >
              Согласен
          </Checkbox>
      }
  </CheckboxWrapper>
  <CheckboxWrapper>
      {({ checked, onChange }) =>
          <Checkbox
              checked={checked}
              onChange={onChange}
              disableBottomMargin
              extraContent={
                  <AttentionIcon style={{ display: 'block', width: '20px', height: '20px', fill: 'var(--systemBlue)'}} />
              }
          >
              Даю согласие на получение рекламы от ПАО «МегаФон» и третьих лиц в целях продвижения услуг
          </Checkbox>
      }
  </CheckboxWrapper>

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


  <CheckboxWrapper>
      {({ checked, onChange }) =>
          <Checkbox
              checked={checked}
              onChange={onChange}
              color="light"
              disableBottomMargin
          >
              Согласен
          </Checkbox>
      }
  </CheckboxWrapper>

Выключенное состояние


  <CheckboxWrapper>
      {() => <Checkbox disabled disableBottomMargin>Согласен</Checkbox>}
  </CheckboxWrapper>

Выключенное состояние + checked


  <CheckboxWrapper>
      {() => <Checkbox checked disabled disableBottomMargin>Согласен</Checkbox>}
  </CheckboxWrapper>

С ошибкой


  <CheckboxWrapper>
      {({ checked, onChange }) =>
          <Checkbox checked={checked} onChange={onChange} error disableBottomMargin>
              Согласен
          </Checkbox>
      }
  </CheckboxWrapper>