@eisgs/radio v1.2.4

Базовый Radio

label позволяет указать дополнительную информацию для пользователя

  const [value, setValue] = React.useState();

  const options = [
    { id: 1, description: 'Значение 1', code: '1' },
    { id: 2, description: 'Значение 2', code: '2' },
    { id: 3, description: 'Значение 3', code: '3' },
    { id: 4, description: 'Значение 4', code: '4' },
  ];

  <Radio
    label="Выбор"
    value={value}
    options={options}
    onChange={setValue}
  />

Кастомные ключи

keyLabel, keyValue кастомные ключи для опций

  const [value, setValue] = React.useState();

  const options = [
    { id: 1, text: 'Значение 1', data: '1' },
    { id: 2, text: 'Значение 2', data: '2' },
    { id: 3, text: 'Значение 3', data: '3' },
    { id: 4, text: 'Значение 4', data: '4' },
  ];

  <Radio
    keyLabel="text"
    keyValue="data"
    value={value}
    options={options}
    onChange={setValue}
  />

disabled

disabled блокирует ввод значений

  const [value, setValue] = React.useState('2');

  const options = [
    { id: 1, description: 'Значение 1', code: '1' },
    { id: 2, description: 'Значение 2', code: '2' },
    { id: 3, description: 'Значение 3', code: '3' },
    { id: 4, description: 'Значение 4', code: '4' },
  ];

  <Radio
    value={value}
    options={options}
    onChange={setValue}
    disabled
  />

Вертикальное расположение опций

direction управляет вариантами расположения опций

  const [value, setValue] = React.useState();

  const options = [
    { id: 1, description: 'Значение 1', code: '1' },
    { id: 2, description: 'Значение 2', code: '2' },
    { id: 3, description: 'Значение 3', code: '3' },
    { id: 4, description: 'Значение 4', code: '4' },
  ];

  <Radio
    value={value}
    options={options}
    onChange={setValue}
    direction="vertical"
  />

Ошибка (ЕИСЖС)

При наличии error текст ошибки отобразится под компонентом

  const error = 'Ошибка';
  const options = [
    { id: 1, description: 'Значение 1', code: '1' },
    { id: 2, description: 'Значение 2', code: '2' },
    { id: 3, description: 'Значение 3', code: '3' },
    { id: 4, description: 'Значение 4', code: '4'},
  ];

  <>
    <Radio
      options={options}
      error={error}
      styles={`margin-bottom: 40px;`}
    />
    <Radio
      options={options}
      direction="vertical"
      error={error}
    />
  </>

Подсказка (ЕИСЖС)

При передаче options можно указать подсказку для каждого варианта ответа (поле hint)

  const options = [
    { id: 1, description: 'Значение 1', code: '1' },
    { id: 2, description: 'Значение 2', code: '2' },
    { id: 3, description: 'Значение 3', code: '3' },
    { id: 4, description: 'Значение 4', code: '4', hint: 'Подсказка 4' },
  ];

  <>
    <Radio
      options={options}
    />
    <Radio
      options={options}
      direction="vertical"
    />
  </>

Отображение подсказки при описании в несколько строк

  const options = [
    { id: 1, description: 'Длинное наименование значения', code: '1', hint: 'Подсказка 1' },
  ];

  <Radio
    options={options}
    direction="vertical"
    styles={`max-width: 220px;`}
  />

Отображение подсказки при размещении компонента в модальном окне

  import { useModal, Modal, ModalHeader } from "@eisgs/modal";
  import { Button } from "@eisgs/button";

  const modal = useModal();
  const modalName = 'RADIO';

  const options = [
    {id: 1, description: 'Значение 1', code: '1', hint: 'Подсказка 1'},
  ];

<>
  <Button onClick={() => modal.open(modalName)}>Открыть модальное окно</Button>
  <Modal name={modalName}>
    <ModalHeader>Radio с подсказкой</ModalHeader>
    <Radio
      options={options}
      direction="vertical"
    />
  </Modal>
</>

view (ИЖС)

Доступные значения desktop и mobile. Значение по умолчанию desktop

const views = ['desktop', 'mobile'].map(view => ({view, options: [{id: view, description: view, code: view}]}));

<div>
  {views.map(({view, options}) => <Radio key={view} options={options} view={view}/>)}
</div>