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