Figma

Checkbox

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


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


    return (
        <div style={{ padding: '20px 10px 8px 10px' }}>
            {props.children({
                checked,
                onChange: handleChange,
            })}
        </div>
    );
};

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

<CheckboxWrapper>
  {({ checked, onChange }) =>
      <Checkbox
          checked={checked}
          onChange={onChange}
          fontSize="small"
      >
          I agree
      </Checkbox>
  }
</CheckboxWrapper>

С ошибкой

<CheckboxWrapper>
  {({ checked, onChange }) =>
      <Checkbox checked={checked} onChange={onChange} error>
          I agree
      </Checkbox>
  }
</CheckboxWrapper>

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

<CheckboxWrapper>
  {({ checked, onChange }) =>
      <Checkbox
          checked={checked}
          onChange={onChange}
          color="light"
      >
          I agree
      </Checkbox>
  }
</CheckboxWrapper>

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

<CheckboxWrapper>
  {({ checked, onChange }) =>
      <Checkbox
          checked={checked}
          onChange={onChange}
          extraContent={
              <div style={extraContentStyle}>
                  Some Extra Content
              </div>
          }
      >
          I agree
      </Checkbox>
  }
</CheckboxWrapper>

Код extraContentStyle
const extraContentStyle = { backgroundColor: '#00B956', color: '#FFF', padding: '5px'};

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

<CheckboxWrapper>
  {() => <Checkbox disabled>I agree</Checkbox>}
</CheckboxWrapper>

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

<CheckboxWrapper>
  {() => <Checkbox checked disabled>I agree</Checkbox>}
</CheckboxWrapper>