Checkbox

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

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

Код CheckboxWrapperexport 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>
    );
};

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

I agree

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

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

С ошибкой

I agree

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

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

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

I agree

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

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

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

I agree

Some Extra Content

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

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

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

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

I agree

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

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

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

I agree

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

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