RadioButtons

Группа переключателей. Используется для выбора только одной опции из множества.

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

Mоделью для группы таких переключателей служит массив обьектов следующего типа src/models/models.ts.:

interface IRadio {
  id: string; // Уникальный идентификатор
  text: string; // Текстовый контент
  subtext?: string; // Дополнительный текст
  value?: boolean; // Значение
  disabled?: boolean; // Недоступна?
}

HTML

Передать данные в модель можно даже из HTML, следующим образом, с помощью значения в виде строки, которую сможет разобрать функция JSON.parse():

<!-- Переключатели будут в ряд, а не в столбик по умолчанию, и каждый не будет шире 150 пикселей -->
<ds-radio-buttons
  direction="row"
  width="150"
  model='[{ "id": "1", "text": "1111" }, { "id": "2", "disabled": true, "text": "2222" }, { "id": "3", "text": "3333" }]'
>
</ds-radio-buttons>

WARNING

С помощью пропса value можно указать значение поля id - идентификатор соответсвующий переключателю выбранному по дефолту, или ничего не будет выбрано.

Поля value в модель компонента передавать бессмысленно - они будут установлены по пропсу value для всей группы (все в false, например, если он не указан).

Дизайн-Система покажет сообщения в консоли в следующих случаях:

• идентификатор (id) какого-либо выбора не указан, неверного типа или пустой
• идентификатор не уникальный
• отсутсвует основная подпись (text) у какого-либо выбора
• основная подпись не уникальна

Или установить из javascript:

<!-- Переключатель с идентификатором "3" будет выбран по умолчанию -->
<ds-radio-buttons
  id="radios"
  value="3"
>
</ds-radio-buttons> 

<script>
  const radios = document.getElementById('radios');
  if (radios) {
    const data = [
      {
        id: '1',
        text: '1111',
      },
      {
        id: '2',
        text: '2222',
        disabled: true, // Переключатель c идентификатором "2" будет недоступен
      },
      {
        id: '3',
        text: '3333',
      },
    ];

    radios.setAttribute('model', JSON.stringify(data));

    radios.addEventListener('input', (e) => {
      // В консоль выведет идентефикатор по полю id актуального выбора и всю модель группы целиком
      console.log('Выбор в группе радио-кнопок:', e.target.getAttribute('value'), JSON.parse(e.target.getAttribute('model')));
    });
  }
</script>

React

import { useCallback } from 'react';
import { RadioButtons } from '@rir/ds-library';

const data = [
  {
    id: '1',
    text: '1111',
  },
  {
    id: '2',
    text: '2222',
  },
  {
    id: '3',
    text: '3333',
  },
];

function Component() {
  const onInput = useCallback((e: Event) => {
    // В консоль выведет идентефикатор по полю id актуального выбора и всю модель группы целиком
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    console.log('Выбор в группе радио-кнопок:', e.target?.getAttribute('value'), JSON.parse(e.target?.getAttribute('model')));
  }, []);

  return (
    <>
      <RadioButtons
        model={data}
        onInput={onInput}
      ></RadioButtons>
    </>
  );
}

export default Component;

API

Props

Name	Type	Description	Default
model	IRadio[]	Модель данных группы переключателей	[]
value	String	Дефолтный выбор и актуальный ввод в дальнейшем, содержит значение поле id выбраного переключателя	undefined
message	String	Текст сообщения об ошибке	''
row	Boolean	Переключатели располагаются в ряд? (в столбик по умолчанию)	false
width	Number	Максимальная ширина переключателей в пикселях когда они идут в ряд - доступно только для режима со включеным row	0
error	Boolean	Показывается ошибка?	false
_error	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined
disabled	Boolean	Неактивная, "выключенная" группа переключателей?	false
_disabled	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined

Events

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

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

React

Angular

Vue