Checkbox

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

Примеры и код

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

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

Prop name	Type	Default	Description
color	"light" \| "dark" \| undefined	dark	Цвет чекбокса
className	string \| undefined		Дополнительный класс корневого элемента
classes	{ inner?: string \| undefined; icon?: string \| undefined; } \| undefined		Дополнительные классы для внутренних элементов
dataAttrs	{ root?: Record<string, string> \| undefined; inner?: Record<string, string> \| undefined; input?: Record<string, string> \| undefined; customInput?: Record<...> \| undefined; extraContent?: Record<...> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам
fontSize	"small" \| "regular" \| undefined	regular	Размер текста
name	string \| undefined		Имя компонента в DOM
value	string \| undefined		Значение чекбокса
checked	boolean \| undefined	false	Управление состоянием вкл/выкл компонента
disabled	boolean \| undefined		Отключение чекбокса
error	boolean \| undefined		Отобразить компонент в состоянии ошибки
extraContent	Element \| ReactNode \| JSX.Element \| Element[] \| Element[]		Дополнительный контент справа
disableBottomMargin	boolean \| undefined	false	Отключить нижний отступ
onChange	((checked: boolean) => void) \| undefined		Обработчик изменения значения