Checkbox

Чекбокс используется, когда доступен список опций, и пользователю необходимо выбрать одну или несколько из них.

Чекбокс не запускает действие немедленно. Как правило для этого нужно нажать подтверждающую кнопку. Для немедленного включения какого-то режима в интерфейсе лучше подходит Switcher.

Иногда списки с чекбоксами содержат дочерние элементы. Если выбрана только часть дочерних чекбоксов, родительский переходит в состояние partial — частично выбран.

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

WARNING

Внимание! Основной слот, вместо основного текста будет предоставлен только в том случае, если атрибут text не указан или пустой!!!

Обратите внимание! В слоте этого компонента необходимо использовать "простой текстовый контент", без компонента Text (это непобходимо для точной работы эффектов).

HTML

<!-- Пример без использования слота -->
<ds-checkbox
  id="сheckbox"
  text="Основной текст"
  subtext="Дополнительный текст"
></ds-checkbox>

<script>
  // Демонстрация получения ввода на элементе
  const checkbox = document.getElementById('checkbox');
  if (checkbox) {
    checkbox.addEventListener('input', (e) => {
      // Если в атрибут value приходит null - переключатель включен
      console.log('Ввод:', e.target?.getAttribute('value') === null);
    });
  }
</script>

<!-- Пример с использованием слота -->
<ds-checkbox
  subtext="Дополнительный текст"
>
  <span slot="main">Fcvxdsfv sadsdad dsfsf <ds-button-link text="Link to aaa"></ds-button-link></span>
</ds-checkbox>

Если несколько чекбоксов в вашей верстке следуют друг за другом "стопкой", вертикальная пауза между ними должна составлять 24px:

<div>
  <ds-checkbox
    text="Основной текст 1"
    style="margin-bottom: 24px;"
  >
  </ds-checkbox>
  <ds-checkbox
    text="Основной текст 2"
    style="margin-bottom: 24px;"
  >
  </ds-checkbox>
  <ds-checkbox
    text="Основной текст 3"
  >
  </ds-checkbox> 
</div>

React

import { useState, useCallback } from 'react';
import { Input } from '@rir/ds-library';

function Component() {
  const [value, setValue] = useState(false);

  const onInput = useCallback((e: Event) => {
    console.log('Событие input на элементе Switcher!', e);
    // Если в атрибут value приходит null - переключатель включен
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    setValue(e.target?.getAttribute('value') === null);
  }, []);

  return (
    <>
      <Checkbox
        text="Основной текст"
        subtext="Дополнительный текст"
        onInput={onInput}
      ></Checkbox>
    </>
  );
}

export default Component;

API

Props

Name	Type	Description	Default
value	String	Актуальный ввод	''
text	String	Основной текст	''
subtext	String	Дополнительный текст	''
message	String	Текст сообщения об ошибке	''
partial	Boolean	Контрол "частично выбран"?	false
_partial	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined
error	Boolean	Показывается ошибка?	false
_error	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined
disabled	Boolean	Неактивная, "выключенная" кнопка?	false
_disabled	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined

Events

Name	Description
input	Событие на изменение ввода

Slots

Name	Description
main	Основной слот

Примеры проектов

React

Angular

Vue